map组件如何使用markers的callout属性实现弹框？

奔跑的狮子

场景描述

markers可以用于标识地图上的点，通过点击该点显示，或者在点上固定显示一段文本，从而描述对应marker的信息。常用于标识一个位置，效果如下图所示。

xuetianshi

啥都不说，直接上代码

2. <template>
    <div>
      <map
         style="width:{{width}}; height:{{height}}"
         scale="{{scale}}"
         markers="{{markers}}"
       >
      </map>
    </div>
   </template>
   <script>
     const COORDTYPE = 'wgs84'
     const MARKER_PATH = '/Common/marker.png'
     const BEI_JING_WGS = {
       latitude: 39.9073728469,
       longitude: 116.3913445961,
       coordType: COORDTYPE
     }
     export default {
       private: {
         scale: 17,
         markers: [
           {
             width: '100%',
             height: '50%',
             latitude: BEI_JING_WGS.latitude,
             longitude: BEI_JING_WGS.longitude,
             coordType: BEI_JING_WGS.coordType,
             iconPath: MARKER_PATH,
             width: '100px',
             callout: {
               content: '这里是\n北京',
               padding: '20px 5px 20px 5px',
               borderRadius: '20px',
               textAlign: 'left',
               display: 'always'
             }
           }
         ]
       }
     }
   </script>

更多案例请参考华为快应用官网：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-case#h1-1577714037667