共计 1678 个字符，预计需要花费 5 分钟才能阅读完成。
一． 问题形容
- 创立地图对象，并增加 marker 标记，对 map 和 marker 均增加了点击事件；
<body>
<script>
function initMap() {
// 创立地图对象
const map = new HWMapJsSDK.HWMap(document.getElementById('map'), {center: { lat: 39.36322, lng: 116.3214},
zoom: 8,
});
map.on('click', handleMapClick);
// 创立标记
const marker = new HWMapJsSDK.HWMarker({
map: map,
position: {lat: 39.36322, lng: 116.3214},
draggable: true
});
// 给标记增加点击事件
marker.addListener('click', (e) => {console.log('marker mouse click');
});
}
// 创立 map 的点击事件
function handleMapClick(){console.log('map mouse click');
}
</script>
</body>- 在测试时发现点击 marker 标记时同时触发了 map 的点击事件，具体能够查看下方的 Gif 图：
二． 解决方案
- 经查阅华为地图服务的 JavaScript 版本的 API 领导文档发现，华为地图服务有提供 un(event, callback) 和 map.on(‘click’, callback) 办法，这两个办法的作用别离是解绑事件监听和增加地图的鼠标左键点击事件。
- 因为华为地图服务提供了事件监听的解绑办法，所以能够在 marker 的点击事件办法中先通过 un(event, callback) 办法解绑 map 的点击事件，事件解绑之后能够保障在点击 marker 时不会误触 map 的点击事件。
- 当 marker 的事件监听业务执行结束之后，能够再通过 map.on(‘click’, callback) 办法 从新增加 map 的点击事件
三． 代码示例及成果展现
- 在 marker 的点击事件办法中先解绑 map 的点击事件，当 marker 的点击事件业务执行结束之后，再从新增加 map 的点击事件。
<body>
<script>
function initMap() {
// 创立地图对象
const map = new HWMapJsSDK.HWMap(document.getElementById('map'), {center: { lat: 39.36322, lng: 116.3214},
zoom: 8,
});
map.on('click', handleMapClick);
// 创立标记
const marker = new HWMapJsSDK.HWMarker({
map: map,
position: {lat: 39.36322, lng: 116.3214},
draggable: true
});
// 给标记增加点击事件
marker.addListener('click', (e) => {
// 解绑 map 对象的点击事件
map.un('click', handleMapClick);
console.log('marker mouse click');
// 增加 map 对象的点击事件
map.on('click', handleMapClick);
});
}
function handleMapClick(){console.log('map mouse click');
}
</script>
</body>- 经下方的 Gif 图可看出，在点击 marker 标记时不会再误触 map 的点击事件。
四． 问题解答
- 调用 JavaScript 版本的的华为地图服务，如何爱护 API 秘钥？
答：具体措施能够查看如下领导文档：如何爱护 API 秘钥？
五． 参考资料
- 通过华为地图 API for JavaScript 创立一个简略的网页地图
- 地图事件
- HWMap API
- 增加 marker 标记
- 标记事件
理解更多详情 >>
拜访地图服务联盟官网
获取地图服务开发领导文档
拜访 HMS Core 联盟官网
获取 HMS Core 开发领导文档
关注咱们，第一工夫理解 HMS Core 最新技术资讯~
正文完
