From c94eddf30898f378ac506e2a006e0291ac0e4127 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sat, 30 Jul 2022 00:41:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(H5=20map):=20=E6=94=AF=E6=8C=81=E9=AB=98?=
 =?UTF-8?q?=E5=BE=B7=E5=9C=B0=E5=9C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/platforms/h5/helpers/location.js          |  30 ++-
 .../h5/view/components/map/index.vue          | 231 +++++++++++++-----
 .../h5/view/components/map/map-marker.js      | 145 ++++++++---
 .../h5/view/components/map/maps/callout.js    | 121 ++++++---
 .../h5/view/components/map/maps/index.js      |  30 ++-
 5 files changed, 426 insertions(+), 131 deletions(-)

diff --git a/src/platforms/h5/helpers/location.js b/src/platforms/h5/helpers/location.js
index ab61ef7dd..5c8476dd5 100644
--- a/src/platforms/h5/helpers/location.js
+++ b/src/platforms/h5/helpers/location.js
@@ -6,21 +6,33 @@ export const ICON_PATH_TARGET =
 export const MapType = {
   QQ: 'qq',
   GOOGLE: 'google',
+  AMAP: 'AMap',
   UNKNOWN: ''
 }
 
 export function getMapInfo () {
-  let type = MapType.UNKNOWN
-  let key = ''
   if (__uniConfig.qqMapKey) {
-    type = MapType.QQ
-    key = __uniConfig.qqMapKey
-  } else if (__uniConfig.googleMapKey) {
-    type = MapType.GOOGLE
-    key = __uniConfig.googleMapKey
+    return {
+      type: MapType.QQ,
+      key: __uniConfig.qqMapKey
+    }
+  }
+  if (__uniConfig.googleMapKey) {
+    return {
+      type: MapType.GOOGLE,
+      key: __uniConfig.googleMapKey
+    }
+  }
+  if (__uniConfig.sdkConfigs.maps.AMap && __uniConfig.sdkConfigs.maps.AMap.key) {
+    return {
+      type: MapType.AMAP,
+      key: __uniConfig.sdkConfigs.maps.AMap.key,
+      securityJsCode: __uniConfig.sdkConfigs.maps.AMap.securityJsCode,
+      serviceHost: __uniConfig.sdkConfigs.maps.AMap.serviceHost
+    }
   }
   return {
-    type,
-    key
+    type: MapType.UNKNOWN,
+    key: ''
   }
 }
diff --git a/src/platforms/h5/view/components/map/index.vue b/src/platforms/h5/view/components/map/index.vue
index 6cb7368c6..0a111eff9 100644
--- a/src/platforms/h5/view/components/map/index.vue
+++ b/src/platforms/h5/view/components/map/index.vue
@@ -1,7 +1,9 @@
 <template>
   <uni-map
     :id="id"
+    ref="mapContainer"
     v-on="$listeners"
+    @touchend="handleAMapClick"
   >
     <map-marker
       v-for="item in markers"
@@ -46,7 +48,20 @@ import {
 import mapMarker from './map-marker'
 import mapPolygon from './map-polygon'
 
-import { ICON_PATH_ORIGIN } from '../../../helpers/location'
+import { ICON_PATH_ORIGIN, MapType, getMapInfo } from '../../../helpers/location'
+
+const mapInfo = getMapInfo()
+const ISAMAP = mapInfo.type === MapType.AMAP
+
+function getAMapPosition (maps, latitude, longitude) {
+  return new maps.LngLat(longitude, latitude)
+}
+function getGoogleQQMapPosition (maps, latitude, longitude) {
+  return new maps.LatLng(latitude, longitude)
+}
+function getMapPosition (maps, latitude, longitude) {
+  return ISAMAP ? getAMapPosition(maps, latitude, longitude) : getGoogleQQMapPosition(maps, latitude, longitude)
+}
 
 function getLat (latLng) {
   if ('getLat' in latLng) {
@@ -201,6 +216,9 @@ export default {
   },
   mounted () {
     loadMaps(this.libraries, result => {
+      // 兼容高德地图
+      result.event = result.event || result.Event
+      result.Point = result.Point || result.BuryPoint
       this._maps = result
       this.init()
     })
@@ -212,6 +230,13 @@ export default {
     this.removeLocation()
   },
   methods: {
+    handleAMapClick (e) {
+      if (ISAMAP) {
+        const { pageX, pageY } = e.changedTouches[0]
+        this.$trigger('click', { x: pageX, y: pageY }, {})
+        this.$trigger('tap', { x: pageX, y: pageY }, {})
+      }
+    },
     _handleSubscribe ({
       type,
       data = {}
@@ -247,10 +272,14 @@ export default {
         case 'moveToLocation':
           {
             const { latitude, longitude } = data
-            var locationPosition = (latitude && longitude) ? new maps.LatLng(latitude, longitude) : this._locationPosition
+            const locationPosition = (latitude && longitude) ? getMapPosition(maps, latitude, longitude) : this._locationPosition
+
             if (locationPosition) {
               this._map.setCenter(locationPosition)
-              callback({})
+              callback({
+                latitude,
+                longitude
+              })
             }
           }
           break
@@ -267,7 +296,7 @@ export default {
                 rotation = marker.getRotation()
               }
               var a = marker.getPosition()
-              var b = new maps.LatLng(destination.latitude, destination.longitude)
+              const b = getMapPosition(maps, destination.latitude, destination.longitude)
               var distance = maps.geometry.spherical.computeDistanceBetween(a, b) / 1000
               var time = ((typeof duration === 'number') ? duration : 1000) / (1000 * 60 * 60)
               var speed = distance / time
@@ -325,20 +354,26 @@ export default {
           this.fitBounds(data.points)
           break
         case 'getRegion':
-          this.boundsReady(() => {
-            var latLngBounds = this._map.getBounds()
-            var southwest = latLngBounds.getSouthWest()
-            var northeast = latLngBounds.getNorthEast()
-            callback({
-              southwest: {
-                latitude: getLat(southwest),
-                longitude: getLng(southwest)
-              },
-              northeast: {
-                latitude: getLat(northeast),
-                longitude: getLng(northeast)
-              }
+          this.mapReady(() => {
+            this.boundsReady(() => {
+              const latLngBounds = this._map.getBounds()
+              const southwest = latLngBounds.getSouthWest()
+              const northeast = latLngBounds.getNorthEast()
+              callback({
+                southwest: {
+                  latitude: getLat(southwest),
+                  longitude: getLng(southwest)
+                },
+                northeast: {
+                  latitude: getLat(northeast),
+                  longitude: getLng(northeast)
+                }
+              })
             })
+            if (ISAMAP) {
+              this.isBoundsReady = true
+              this.$emit('boundsready')
+            }
           })
           break
         case 'getScale':
@@ -352,7 +387,7 @@ export default {
     },
     init () {
       const maps = this._maps
-      var center = new maps.LatLng(this.center.latitude, this.center.longitude)
+      const center = getMapPosition(maps, this.center.latitude, this.center.longitude)
       var map = this._map = new maps.Map(this.$refs.map, {
         center,
         zoom: Number(this.scale),
@@ -442,7 +477,8 @@ export default {
         this.center.longitude = longitude
         if (this._map) {
           this.mapReady(() => {
-            this._map.setCenter(new maps.LatLng(latitude, longitude))
+            const centerPosition = getMapPosition(maps, latitude, longitude)
+            this._map.setCenter(centerPosition)
           })
         }
       }
@@ -453,10 +489,13 @@ export default {
       var polyline = this.polylineSync
       this.removePolyline()
       this.polyline.forEach(option => {
-        var path = []
+        const path = []
+
         option.points.forEach(point => {
-          path.push(new maps.LatLng(point.latitude, point.longitude))
+          const pointPosition = ISAMAP ? [point.longitude, point.latitude] : getGoogleQQMapPosition(maps, point.latitude, point.longitude)
+          path.push(pointPosition)
         })
+
         const borderWidth = Number(option.borderWidth) || 0
         const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color)
         const { r: br, g: bg, b: bb, a: ba } = hexToRgba(option.borderColor)
@@ -464,14 +503,23 @@ export default {
           map,
           clickable: false,
           path,
-          strokeWeight: option.width + borderWidth,
+          strokeWeight: ((Number(option.width) || 0) + borderWidth) || 6,
           strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
         }
+
+        if (ISAMAP) {
+          polylineOptions.strokeColor = option.strokeColor
+          polylineOptions.strokeStyle = option.dottedLine ? 'dashed' : 'solid'
+          polylineOptions.isOutline = !!option.borderWidth
+          polylineOptions.borderWeight = option.borderWidth
+          polylineOptions.outlineColor = option.borderColor
+        }
+
         const polylineBorderOptions = {
           map,
           clickable: false,
           path,
-          strokeWeight: option.width,
+          strokeWeight: option.width || 6,
           strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
         }
         if ('Color' in maps) {
@@ -486,7 +534,11 @@ export default {
         if (borderWidth) {
           polyline.push(new maps.Polyline(polylineBorderOptions))
         }
-        polyline.push(new maps.Polyline(polylineOptions))
+        const _polyline = new maps.Polyline(polylineOptions)
+        if (ISAMAP) {
+          map.add(_polyline)
+        }
+        polyline.push(_polyline)
       })
     },
     removePolyline () {
@@ -498,12 +550,11 @@ export default {
     },
     createCircles () {
       const maps = this._maps
-      var map = this._map
-      var circles = this.circlesSync
+      const map = this._map
+      const circles = this.circlesSync
       this.removeCircles()
       this.circles.forEach(option => {
-        var center = new maps.LatLng(option.latitude, option.longitude)
-
+        const center = ISAMAP ? [option.longitude, option.latitude] : getGoogleQQMapPosition(maps, option.latitude, option.longitude)
         const circleOptions = {
           map,
           center,
@@ -512,18 +563,30 @@ export default {
           strokeWeight: Number(option.strokeWidth) || 1,
           strokeDashStyle: 'solid'
         }
-        const { r: fr, g: fg, b: fb, a: fa } = hexToRgba(option.fillColor || '#00000000')
-        const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color || '#000000')
-        if ('Color' in maps) {
-          circleOptions.fillColor = new maps.Color(fr, fg, fb, fa)
-          circleOptions.strokeColor = new maps.Color(sr, sg, sb, sa)
+
+        if (ISAMAP) {
+          circleOptions.strokeColor = option.color
+          circleOptions.fillColor = option.fillColor || '#000'
         } else {
-          circleOptions.fillColor = `rgb(${fr}, ${fg}, ${fb})`
-          circleOptions.fillOpacity = fa
-          circleOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
-          circleOptions.strokeOpacity = sa
+          const { r: fr, g: fg, b: fb, a: fa } = hexToRgba(option.fillColor || '#00000000')
+          const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color || '#000000')
+          if ('Color' in maps) {
+            // 腾讯
+            circleOptions.fillColor = new maps.Color(fr, fg, fb, fa)
+            circleOptions.strokeColor = new maps.Color(sr, sg, sb, sa)
+          } else {
+            // Google
+            circleOptions.fillColor = `rgb(${fr}, ${fg}, ${fb})`
+            circleOptions.fillOpacity = fa
+            circleOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
+            circleOptions.strokeOpacity = sa
+          }
+        }
+
+        const circle = new maps.Circle(circleOptions)
+        if (ISAMAP) {
+          map.add(circle)
         }
-        var circle = new maps.Circle(circleOptions)
         circles.push(circle)
       })
     },
@@ -549,6 +612,8 @@ export default {
         style.position = 'absolute'
         style.width = 0
         style.height = 0
+        style.top = 0
+        style.left = 0
         img.onload = () => {
           if (option.position.width) {
             img.width = option.position.width
@@ -569,8 +634,13 @@ export default {
               controlId: option.id
             })
           }
+          $event.stopPropagation()
+        }
+        if (ISAMAP) {
+          this.$refs.mapContainer.appendChild(control)
+        } else {
+          map.controls[maps.ControlPosition.TOP_LEFT].push(control)
         }
-        map.controls[maps.ControlPosition.TOP_LEFT].push(control)
         controls.push(control)
       })
     },
@@ -583,8 +653,8 @@ export default {
     },
     createLocation () {
       const maps = this._maps
-      var map = this._map
-      var location = this._location
+      const map = this._map
+      let location = this._location
       if (location) {
         this.removeLocation()
       }
@@ -594,14 +664,30 @@ export default {
           if (location !== this._location) {
             return
           }
-          var position = new maps.LatLng(res.latitude, res.longitude)
-          location = new maps.Marker({
-            position,
-            map,
-            icon: new maps.MarkerImage(ICON_PATH_ORIGIN, null, null, new maps.Point(22, 22), new maps.Size(44, 44)),
-            flat: true,
-            rotation: 0
-          })
+          const position = getMapPosition(maps, res.latitude, res.longitude)
+          if (ISAMAP) {
+            location = new maps.Marker({
+              position,
+              map,
+              flat: true,
+              rotation: 0
+            })
+            const icon = new maps.Icon({
+              size: new maps.Size(44, 44),
+              image: ICON_PATH_ORIGIN,
+              imageSize: new maps.Size(44, 44)
+            })
+            location.setIcon(icon)
+            map.add(location)
+          } else {
+            location = new maps.Marker({
+              position,
+              map,
+              icon: new maps.MarkerImage(ICON_PATH_ORIGIN, null, null, new maps.Point(22, 22), new maps.Size(44, 44)),
+              flat: true,
+              rotation: 0
+            })
+          }
           this._location = location
           refreshLocation()
           this.__onCompassChange = function (res) {
@@ -623,7 +709,7 @@ export default {
           uni.getLocation({
             type: 'gcj02',
             success: (res) => {
-              var locationPosition = self._locationPosition = new maps.LatLng(res.latitude, res.longitude)
+              const locationPosition = self._locationPosition = getMapPosition(maps, res.latitude, res.longitude)
               location.setPosition(locationPosition)
             },
             fail: e => {
@@ -648,20 +734,35 @@ export default {
     fitBounds (points, cb) {
       const maps = this._maps
       this.boundsReady(() => {
-        var map = this._map
-        var bounds = new maps.LatLngBounds()
+        const map = this._map
+
+        if (ISAMAP) {
+          const _points = []
+          points.forEach(point => {
+            _points.push([point.longitude, point.latitude])
+          })
+          const bounds = new maps.Bounds(..._points)
+          map.setBounds(bounds)
+        } else {
+          const bounds = new maps.LatLngBounds()
+          points.forEach(point => {
+            const longitude = point.longitude
+            const latitude = point.latitude
+            const latLng = getGoogleQQMapPosition(maps, latitude, longitude)
+            bounds.extend(latLng)
+          })
+          map.fitBounds(bounds)
+        }
 
-        points.forEach(point => {
-          var longitude = point.longitude
-          var latitude = point.latitude
-          var latLng = new maps.LatLng(latitude, longitude)
-          bounds.extend(latLng)
-        })
-        map.fitBounds(bounds)
         if (typeof cb === 'function') {
           cb()
         }
       })
+
+      if (ISAMAP) {
+        this.isBoundsReady = true
+        this.$emit('boundsready')
+      }
     },
     mapReady (cb) {
       if (this.isMapReady) {
@@ -703,4 +804,16 @@ export default {
 	uni-map[hidden] {
 		display: none;
 	}
+
+  /* 处理高德地图 marker label 默认样式 */
+  .amap-marker-label{
+		padding:0;
+		border:none;
+    background-color: transparent;
+	}
+  /* 处理高德地图 open-location icon 被遮挡问题 */
+  .amap-marker>.amap-icon>img{
+    left:0!important;
+    top:0!important;
+  }
 </style>
diff --git a/src/platforms/h5/view/components/map/map-marker.js b/src/platforms/h5/view/components/map/map-marker.js
index 34eb6e348..b99a7a86d 100644
--- a/src/platforms/h5/view/components/map/map-marker.js
+++ b/src/platforms/h5/view/components/map/map-marker.js
@@ -1,5 +1,12 @@
+import {
+  MapType,
+  getMapInfo
+} from '../../../helpers/location'
 import getRealPath from 'uni-platform/helpers/get-real-path'
 
+const mapInfo = getMapInfo()
+const ISAMAP = mapInfo.type === MapType.AMAP
+
 export default {
   props: {
     id: {
@@ -97,26 +104,34 @@ export default {
       this.updateMarker(props)
       maps.event.addListener(marker, 'click', (e) => {
         const callout = marker.callout
-        if (callout) {
-          const div = callout.div
-          const parent = div.parentNode
-          if (!callout.alwaysVisible) {
+        if (callout && !callout.alwaysVisible) {
+          if (ISAMAP) {
+            callout.visible = !callout.visible
+            if (callout.visible) {
+              marker.callout.createAMapText()
+            } else {
+              marker.callout.removeAMapText()
+            }
+          } else {
             callout.set('visible', !callout.visible)
-          }
-          if (callout.visible) {
-            parent.removeChild(div)
-            parent.appendChild(div)
+            if (callout.visible) {
+              const div = callout.div
+              const parent = div.parentNode
+              parent.removeChild(div)
+              parent.appendChild(div)
+            }
           }
         }
         if (this.idString) {
+          const { latitude, longitude } = this.getMarkerLatitudeLongitude(e)
           this.$parent.$trigger('markertap', {}, {
             markerId: Number(this.idString),
-            latitude: typeof e.latLng.lat === 'function' ? e.latLng.lat() : e.latLng.lat,
-            longitude: typeof e.latLng.lat === 'function' ? e.latLng.lng() : e.latLng.lng
+            latitude,
+            longitude
           })
         }
 
-        const event = e.event || e.domEvent
+        const event = e.event || e.domEvent || e.originEvent
         event.stopPropagation()
       })
     },
@@ -125,7 +140,7 @@ export default {
       const maps = this._maps
       const marker = this._marker
       const title = option.title
-      const position = new maps.LatLng(option.latitude, option.longitude)
+      const position = ISAMAP ? new maps.LngLat(option.longitude, option.latitude) : new maps.LatLng(option.latitude, option.longitude)
       const img = new Image()
       img.onload = () => {
         const anchor = option.anchor || {}
@@ -143,6 +158,7 @@ export default {
         }
         const top = h - (h - y * h)
         if ('MarkerImage' in maps) {
+          // 腾讯 & google
           icon = new maps.MarkerImage(
             img.src,
             null,
@@ -150,6 +166,14 @@ export default {
             new maps.Point(x * w, y * h),
             new maps.Size(w, h)
           )
+        } else if ('Icon' in maps) {
+          // 高德
+          icon = new maps.Icon({
+            image: img.src,
+            size: new maps.Size(w, h),
+            imageSize: new maps.Size(w, h),
+            imageOffset: new maps.Pixel(x * w, y * h)
+          })
         } else {
           icon = {
             url: img.src,
@@ -182,8 +206,9 @@ export default {
             marginTop: (Number(labelOpt.anchorY || labelOpt.y) || 0) + 'px'
           }
           if ('Label' in maps) {
+            // 腾讯
             label = new maps.Label({
-              position: position,
+              position,
               map: map,
               clickable: false,
               content: labelOpt.content,
@@ -191,13 +216,36 @@ export default {
             })
             marker.label = label
           } else if ('setLabel' in marker) {
-            const className = this.updateMarkerLabelStyle(this.idString, labelStyle)
-            marker.setLabel({
-              text: labelOpt.content,
-              color: labelStyle.color,
-              fontSize: labelStyle.fontSize,
-              className
-            })
+            // 高德
+            if (ISAMAP) {
+              const content =
+              `<div style="
+                margin-left:${labelStyle.marginLeft};
+                margin-top:${labelStyle.marginTop};
+                padding:${labelStyle.padding};
+                background-color:${labelStyle.backgroundColor};
+                border-radius:${labelStyle.borderRadius};
+                line-height:${labelStyle.lineHeight};
+                color:${labelStyle.color};
+                font-size:${labelStyle.fontSize};
+
+                ">
+                ${labelOpt.content}
+              <div>`
+              marker.setLabel({
+                content,
+                direction: 'bottom-right'
+              })
+            } else {
+              // google
+              const className = this.updateMarkerLabelStyle(this.idString, labelStyle)
+              marker.setLabel({
+                text: labelOpt.content,
+                color: labelStyle.color,
+                fontSize: labelStyle.fontSize,
+                className
+              })
+            }
           }
         }
         const calloutOpt = option.callout || {}
@@ -210,6 +258,8 @@ export default {
               position,
               map,
               top,
+              // handle AMap callout offset
+              offsetY: -option.height / 2,
               content: calloutOpt.content,
               color: calloutOpt.color,
               fontSize: calloutOpt.fontSize,
@@ -223,26 +273,38 @@ export default {
               position,
               map,
               top,
+              offsetY: -option.height / 2,
               content: title,
               boxShadow: boxShadow
             }
           if (callout) {
             callout.setOption(calloutStyle)
           } else {
-            callout = marker.callout = new maps.Callout(calloutStyle)
-            callout.div.onclick = ($event) => {
-              if (this.idString) {
-                this.$parent.$trigger('callouttap', $event, {
-                  markerId: Number(this.idString)
-                })
+            if (ISAMAP) {
+              const callback = (self) => {
+                if (self.idString) {
+                  self.$parent.$trigger('callouttap', {}, {
+                    markerId: Number(self.idString)
+                  })
+                }
+              }
+              callout = marker.callout = new maps.Callout(calloutStyle, callback, this)
+            } else {
+              callout = marker.callout = new maps.Callout(calloutStyle)
+              callout.div.onclick = ($event) => {
+                if (this.idString) {
+                  this.$parent.$trigger('callouttap', $event, {
+                    markerId: Number(this.idString)
+                  })
+                }
+                $event.stopPropagation()
+                $event.preventDefault()
               }
-              $event.stopPropagation()
-              $event.preventDefault()
             }
           }
         } else {
           if (callout) {
-            callout.setMap(null)
+            this.removeMarkerCallout(marker.callout)
             delete marker.callout
           }
         }
@@ -276,6 +338,22 @@ export default {
       styleEl.innerText = `.${className}{${div.getAttribute('style')}}`
       return className
     },
+    getMarkerLatitudeLongitude (e) {
+      let latitude
+      let longitude
+
+      if (ISAMAP) {
+        latitude = e.lnglat.lat
+        longitude = e.lnglat.lng
+      } else if (mapInfo.type === MapType.QQ) {
+        latitude = e.latLng.lat
+        longitude = e.latLng.lng
+      } else if (mapInfo.type === MapType.GOOGLE) {
+        latitude = e.latLng.lat()
+        longitude = e.latLng.lng()
+      }
+      return { latitude, longitude }
+    },
     removeMarker () {
       const marker = this._marker
       if (marker) {
@@ -283,12 +361,19 @@ export default {
           marker.label.setMap(null)
         }
         if (marker.callout) {
-          marker.callout.setMap(null)
+          this.removeMarkerCallout(marker.callout)
         }
         marker.setMap(null)
       }
       delete this.$parent._markers[this.idString]
       this._marker = null
+    },
+    removeMarkerCallout (callout) {
+      if (ISAMAP) {
+        callout.removeAMapText()
+      } else {
+        callout.setMap(null)
+      }
     }
   },
   render () {
diff --git a/src/platforms/h5/view/components/map/maps/callout.js b/src/platforms/h5/view/components/map/maps/callout.js
index 5d7a8fa54..b311673dd 100644
--- a/src/platforms/h5/view/components/map/maps/callout.js
+++ b/src/platforms/h5/view/components/map/maps/callout.js
@@ -1,5 +1,11 @@
+import {
+  MapType,
+  getMapInfo
+} from '../../../../helpers/location'
+const mapInfo = getMapInfo()
+const ISAMAP = mapInfo.type === MapType.AMAP
+
 export function createCallout (maps) {
-  const overlay = new (maps.OverlayView || maps.Overlay)()
   function onAdd () {
     const div = this.div
     const panes = this.getPanes()
@@ -12,6 +18,38 @@ export function createCallout (maps) {
     }
   }
 
+  function createAMapText () {
+    const option = this.option
+    this.Text = new maps.Text({
+      text: option.content,
+      anchor: 'bottom-center', // 设置文本标记锚点
+      offset: new maps.Pixel(0, option.offsetY),
+      style: {
+        'margin-bottom': '1rem',
+        padding: (option.padding || 8) + 'px',
+        'line-height': (option.fontSize || 14) + 'px',
+        'border-radius': (option.borderRadius || 0) + 'px',
+        'border-color': `${option.bgColor || '#fff'} transparent transparent`,
+        'background-color': option.bgColor || '#fff',
+        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
+        'text-align': 'center',
+        'font-size': (option.fontSize || 14) + 'px',
+        color: option.color || '#000'
+      },
+      position: option.position
+    })
+
+    maps.event.addListener(this.Text, 'click', () => {
+      this.callback(this.parent)
+    })
+
+    this.Text.setMap(option.map)
+  }
+
+  function removeAMapText () {
+    this.option.map.remove(this.Text)
+  }
+
   class Callout {
     option
     position
@@ -20,6 +58,9 @@ export function createCallout (maps) {
     alwaysVisible
     div
     triangle
+    callback
+    parent
+    Text
 
     set onclick (callback) {
       this.div.onclick = callback
@@ -29,43 +70,61 @@ export function createCallout (maps) {
       return this.div.onclick
     }
 
-    constructor (option = {}) {
+    constructor (option = {}, callback, parent) {
       this.option = option || {}
-      const map = option.map
-      this.position = option.position
-      this.index = 1
-      const visible = (this.visible = this.alwaysVisible = option.display === 'ALWAYS')
-      const div = (this.div = document.createElement('div'))
-      const divStyle = div.style
-      divStyle.position = 'absolute'
-      divStyle.whiteSpace = 'nowrap'
-      divStyle.transform = 'translateX(-50%) translateY(-100%)'
-      divStyle.zIndex = '1'
-      divStyle.boxShadow = option.boxShadow || 'none'
-      divStyle.display = visible ? 'block' : 'none'
-      const triangle = (this.triangle = document.createElement('div'))
-      triangle.setAttribute(
-        'style',
-        'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
-      )
-      this.setStyle(option)
-      div.appendChild(triangle)
-      if (map) {
-        this.setMap(map)
+      this.visible = this.alwaysVisible = option.display === 'ALWAYS'
+      if (ISAMAP) {
+        this.callback = callback
+        this.parent = parent
+        if (this.visible) {
+          this.createAMapText()
+        }
+      } else {
+        const map = option.map
+        this.position = option.position
+        this.index = 1
+        const div = (this.div = document.createElement('div'))
+        const divStyle = div.style
+        divStyle.position = 'absolute'
+        divStyle.whiteSpace = 'nowrap'
+        divStyle.transform = 'translateX(-50%) translateY(-100%)'
+        divStyle.zIndex = '1'
+        divStyle.boxShadow = option.boxShadow || 'none'
+        divStyle.display = this.visible ? 'block' : 'none'
+        const triangle = (this.triangle = document.createElement('div'))
+        triangle.setAttribute(
+          'style',
+          'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
+        )
+        this.setStyle(option)
+        div.appendChild(triangle)
+        if (map) {
+          this.setMap(map)
+        }
       }
     }
 
+    createAMapText = createAMapText
+    removeAMapText = removeAMapText
+
     onAdd = onAdd
     construct = onAdd
     setOption (option) {
       this.option = option
-      this.setPosition(option.position)
       if (option.display === 'ALWAYS') {
         this.alwaysVisible = this.visible = true
       } else {
         this.alwaysVisible = false
       }
-      this.setStyle(option)
+      if (ISAMAP) {
+        if (this.visible) {
+          this.removeAMapText()
+          this.createAMapText()
+        }
+      } else {
+        this.setPosition(option.position)
+        this.setStyle(option)
+      }
     }
 
     setStyle (option) {
@@ -107,11 +166,15 @@ export function createCallout (maps) {
 
     destroy = onRemove
   }
-  const prototype = Callout.prototype
-  for (const key in overlay) {
-    if (!(key in prototype)) {
-      prototype[key] = overlay[key]
+  if (!ISAMAP) {
+    const prototype = Callout.prototype
+    const overlay = new (maps.OverlayView || maps.Overlay)()
+    for (const key in overlay) {
+      if (!(key in prototype)) {
+        prototype[key] = overlay[key]
+      }
     }
   }
+
   return Callout
 }
diff --git a/src/platforms/h5/view/components/map/maps/index.js b/src/platforms/h5/view/components/map/maps/index.js
index b284ee4c4..e71b989a1 100644
--- a/src/platforms/h5/view/components/map/maps/index.js
+++ b/src/platforms/h5/view/components/map/maps/index.js
@@ -10,6 +10,7 @@ const GOOGLE_MAP_CALLBACKNAME = '__map_callback__'
 
 export function loadMaps (libraries, callback) {
   const mapInfo = getMapInfo()
+  const ISAMAP = mapInfo.type === MapType.AMAP
   if (!mapInfo.key) {
     console.error('Map key not configured.')
     return
@@ -21,7 +22,7 @@ export function loadMaps (libraries, callback) {
     window[mapInfo.type] &&
     window[mapInfo.type].maps
   ) {
-    maps = window[mapInfo.type].maps
+    maps = ISAMAP ? window[mapInfo.type] : window[mapInfo.type].maps
     maps.Callout = maps.Callout || createCallout(maps)
     callback(maps)
   } else if (callbacks.length) {
@@ -32,20 +33,24 @@ export function loadMaps (libraries, callback) {
     const callbackName = GOOGLE_MAP_CALLBACKNAME + mapInfo.type
     globalExt[callbackName] = function () {
       delete globalExt[callbackName]
-      maps = window[mapInfo.type].maps
+      maps = ISAMAP ? window[mapInfo.type] : window[mapInfo.type].maps
       maps.Callout = createCallout(maps)
       callbacks.forEach((callback) => callback(maps))
       callbacks.length = 0
     }
     const script = document.createElement('script')
-    let src =
-      mapInfo.type === MapType.GOOGLE ? 'https://maps.googleapis.com/maps/api/js?' : 'https://map.qq.com/api/js?v=2.exp&'
+    let src = getScriptBaseUrl(mapInfo.type)
+
     if (mapInfo.type === MapType.QQ) {
       libraries.push('geometry')
     }
     if (libraries.length) {
       src += `libraries=${libraries.join('%2C')}&`
     }
+
+    if (ISAMAP) {
+      handleAMapSecurityPolicy(mapInfo)
+    }
     script.src = `${src}key=${mapInfo.key}&callback=${callbackName}`
     script.onerror = function () {
       console.error('Map load failed.')
@@ -53,3 +58,20 @@ export function loadMaps (libraries, callback) {
     document.body.appendChild(script)
   }
 }
+
+function getScriptBaseUrl (mapType) {
+  const urlMap = {
+    qq: 'https://map.qq.com/api/js?v=2.exp&',
+    google: 'https://maps.googleapis.com/maps/api/js?',
+    AMap: 'https://webapi.amap.com/maps?v=2.0&'
+  }
+
+  return urlMap[mapType]
+}
+
+function handleAMapSecurityPolicy (mapInfo) {
+  window._AMapSecurityConfig = {
+    securityJsCode: mapInfo.securityJsCode || '',
+    serviceHost: mapInfo.serviceHost || ''
+  }
+}
-- 
GitLab