【FAQ】關於JavaScript版本的華為地圖服務Map的點選事件與Marker的點選事件存在衝突的解決方案

一．問題描述

建立地圖物件，並新增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>