一． 问题形容
- 创立地图对象，并增加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 最新技术资讯~
发表回复