fix(H5 map): 高德 callout 不支持换行符及图标位置异常 #4230

src/platforms/h5/view/components/map/map-marker.js

@@ -146,6 +146,7 @@ export default {
       const title = option.title
       const position = IS_AMAP ? new maps.LngLat(option.longitude, option.latitude) : new maps.LatLng(option.latitude, option.longitude)
       const img = new Image()
+      let imgHeight = 0
       img.onload = () => {
         const anchor = option.anchor || {}
         let icon
@@ -160,6 +161,7 @@ export default {
           w = img.width / 2
           h = img.height / 2
         }
+        imgHeight = h
         const top = h - (h - y * h)
         if ('MarkerImage' in maps) {
           // 腾讯 & google
@@ -255,14 +257,21 @@ export default {
         let callout = marker.callout
         let calloutStyle
         if (calloutOpt.content || title) {
+          if (IS_AMAP && calloutOpt.content) {
+            calloutOpt.content = calloutOpt.content.replaceAll('\n', '<br/>')
+          }
           const boxShadow = '0px 0px 3px 1px rgba(0,0,0,0.5)'
+          let offsetY = -imgHeight / 2
+          if (option.width || option.height) {
+            offsetY += 14 - imgHeight / 2
+          }
           calloutStyle = calloutOpt.content
             ? {
               position,
               map,
               top,
               // handle AMap callout offset
-              offsetY: -option.height / 2,
+              offsetY,
               content: calloutOpt.content,
               color: calloutOpt.color,
               fontSize: calloutOpt.fontSize,
@@ -276,7 +285,7 @@ export default {
               position,
               map,
               top,
-              offsetY: -option.height / 2,
+              offsetY,
               content: title,
               boxShadow: boxShadow
             }