一． 問題描述
- 創(chuàng)建地圖對象，并添加marker標記，對map和marker均添加了點擊事件；
<body>
<script>
function initMap() {
// 創(chuàng)建地圖對象
const map = new HWMapJsSDK.HWMap(document.getElementById('map'), {
center: { lat: 39.36322, lng: 116.3214 },
zoom: 8,
});
map.on('click', handleMapClick);
// 創(chuàng)建標記
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');
});
}
//創(chuàng)建map的點擊事件
function handleMapClick(){
console.log('map mouse click');
}
</script>
</body>
```
2. 在測試時發(fā)現(xiàn)點擊marker標記時同時觸發(fā)了map的點擊事件，具體可以查看下方的Gif圖：
### 二． 解決方案
1. 經(jīng)查閱華為地圖服務(wù)的JavaScript版本的API指導(dǎo)文檔發(fā)現(xiàn)，華為地圖服務(wù)有提供un(event, callback)和map.on('click', callback)方法，這兩個方法的作用分別是解綁事件監(jiān)聽和添加地圖的鼠標左鍵點擊事件。
2. 因為華為地圖服務(wù)提供了事件監(jiān)聽的解綁方法，所以可以在marker的點擊事件方法中先通過un(event, callback)方法解綁map的點擊事件，事件解綁之后可以保證在點擊marker時不會誤觸map的點擊事件。
3. 當marker的事件監(jiān)聽業(yè)務(wù)執(zhí)行完畢之后，可以再通過map.on('click', callback)方法 重新添加map的點擊事件
### 三． 代碼示例及效果展示
1. 在marker的點擊事件方法中先解綁map的點擊事件，當marker的點擊事件業(yè)務(wù)執(zhí)行完畢之后，再重新添加map的點擊事件。
// 創(chuàng)建標記
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>
- 經(jīng)下方的Gif圖可看出，在點擊marker標記時不會再誤觸map的點擊事件。
四． 問題解答
- 調(diào)用JavaScript版本的的華為地圖服務(wù)，如何保護API秘鑰？
答：具體措施可以查看如下指導(dǎo)文檔：如何保護API秘鑰？
五． 參考資料
-
通過華為地圖API for JavaScript創(chuàng)建一個簡單的網(wǎng)頁地圖
-
地圖事件
-
HWMap API
-
添加marker標記
-
標記事件
了解更多詳情>>
訪問地圖服務(wù)聯(lián)盟官網(wǎng)
獲取地圖服務(wù)開發(fā)指導(dǎo)文檔
訪問HMS Core 聯(lián)盟官網(wǎng)
獲取HMS Core 開發(fā)指導(dǎo)文檔文章來源：http://www.zghlxwxcb.cn/news/detail-425809.html
關(guān)注我們，第一時間了解 HMS Core 最新技術(shù)資訊~文章來源地址http://www.zghlxwxcb.cn/news/detail-425809.html
到了這里，關(guān)于【FAQ】關(guān)于JavaScript版本的華為地圖服務(wù)Map的點擊事件與Marker的點擊事件存在沖突的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[JavaScript游戲開發(fā)] 繪制冰宮寶藏地圖、人物鼠標點擊移動、障礙檢測](https://imgs.yssmx.com/Uploads/2024/02/608253-1.png)
![【華為OD】C卷真題200分：服務(wù)器廣播 JavaScript代碼實現(xiàn)[思路+代碼]](https://imgs.yssmx.com/Uploads/2024/03/843216-1.jpeg)
