关于appgallery-connect: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