fix(map): 修复高德地图h5PC端覆盖物点击触发map点击问题

jivan84 · Aug 11, 2022 · e4c8277 · e4c8277
1 parent cc623a3
commit e4c8277
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 34 deletions.
diff --git a/src/platforms/h5/view/components/map/map-marker.js b/src/platforms/h5/view/components/map/map-marker.js
@@ -96,17 +96,18 @@ export default {
       })
       this.$parent._markers[this.idString] = marker
       this.updateMarker(props)
-      maps.event.addListener(marker, 'click', (e) => {
-        const callout = marker.callout
-        if (callout && !callout.alwaysVisible) {
-          if (IS_AMAP) {
-            callout.visible = !callout.visible
-            if (callout.visible) {
-              marker.callout.createAMapText()
-            } else {
-              marker.callout.removeAMapText()
-            }
-          } else {
+      if (IS_AMAP) {
+        // 不通过 addListener 方式绑定事件，为了规避高德地图覆盖物点击触发map点击问题
+        marker.dom.addEventListener('click', e => {
+          this.handleAMapMarkerClick(e, marker)
+        })
+        marker.dom.addEventListener('touchend', e => {
+          this.handleAMapMarkerClick(e, marker)
+        })
+      } else {
+        maps.event.addListener(marker, 'click', (e) => {
+          const callout = marker.callout
+          if (callout && !callout.alwaysVisible) {
             callout.set('visible', !callout.visible)
             if (callout.visible) {
               const div = callout.div
@@ -115,29 +116,26 @@ export default {
               parent.appendChild(div)
             }
           }
-        }
 
-        const event = e.event || e.domEvent || e.originEvent
+          const event = e.event || e.domEvent
 
-        if (this.idString) {
-          const { latitude, longitude } = this.getMarkerLatitudeLongitude(e)
-          this.$parent.$trigger('markertap', event, {
-            markerId: Number(this.idString),
-            latitude,
-            longitude
-          })
-        }
-        // 避开高德地图bug: pc端 stopPropagation 无效且地图随鼠标移动
-        if (event !== e.originEvent) {
+          if (this.idString) {
+            const { latitude, longitude } = this.getMarkerLatitudeLongitude(e)
+            this.$parent.$trigger('markertap', event, {
+              markerId: Number(this.idString),
+              latitude,
+              longitude
+            })
+          }
           event.stopPropagation()
-        }
-      })
-      // 处理 google H5移动端 maker 点击触发 map 点击问题
-      maps.event.addListener(marker, 'mousedown', (e) => {
-        if (e.domEvent) {
-          e.domEvent.stopPropagation()
-        }
-      })
+        })
+        // 处理 google H5移动端 maker 点击触发 map 点击问题
+        maps.event.addListener(marker, 'mousedown', (e) => {
+          if (e.domEvent) {
+            e.domEvent.stopPropagation()
+          }
+        })
+      }
     },
     updateMarker (option) {
       const map = this._map
@@ -318,6 +316,25 @@ export default {
         console.error('Marker.iconPath is required.')
       }
     },
+    handleAMapMarkerClick (e, marker) {
+      const callout = marker.callout
+      if (callout && !callout.alwaysVisible) {
+        callout.visible = !callout.visible
+        if (callout.visible) {
+          marker.callout.createAMapText()
+        } else {
+          marker.callout.removeAMapText()
+        }
+      }
+      if (this.idString) {
+        this.$parent.$trigger('markertap', e, {
+          markerId: Number(this.idString),
+          latitude: marker._position.lat,
+          longitude: marker._position.lng
+        })
+      }
+      e.stopPropagation()
+    },
     updateMarkerLabelStyle (id, style) {
       const className = 'uni-map-marker-label-' + id
       let styleEl = document.getElementById(className)

diff --git a/src/platforms/h5/view/components/map/maps/callout.js b/src/platforms/h5/view/components/map/maps/callout.js
@@ -32,14 +32,22 @@ export function createCallout (maps) {
       },
       position: option.position
     })
-
-    maps.event.addListener(this.Text, 'click', ({ originEvent }) => {
-      this.callback(originEvent, this.parent)
+    // 不通过 addListener 方式绑定事件，为了规避高德地图覆盖物点击触发map点击问题
+    this.Text.dom.addEventListener('click', e => {
+      handleAMapTextClick(this, e)
+    })
+    this.Text.dom.addEventListener('touchend', e => {
+      handleAMapTextClick(this, e)
     })
 
     this.Text.setMap(option.map)
   }
 
+  function handleAMapTextClick (self, e) {
+    self.callback(e, self.parent)
+    e.stopPropagation()
+  }
+
   function removeAMapText () {
     if (this.Text) {
       this.option.map.remove(this.Text)