map组件如何展示marker的callout气泡

场景描述
marker 可以通过点击或者常显的方式显示一个文本为用来描述和对应 marker 相关的信息。

实现思路
如下示例展示了在对应的 marker 上展示常显文本气泡。

由于文本气泡是无法自定义宽高的，即气泡根据文本内容自适应宽高，那么也就说明textAlign属性，只有文本内容中包含换行符（"\n"）的时候，才会有直观的可视效果。

解决方法
代码如下：

<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>

更多参考
Map组件：

https://developer.huawei.com/...

原文链接：https://developer.huawei.com/...
原作者：Mayism