关于appgallery-connect:map组件如何展示marker的callout气泡

35次阅读

共计 855 个字符，预计需要花费 3 分钟才能阅读完成。

场景形容
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

正文完