场景描述

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

实现思路

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

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

map组件如何展示marker的callout气泡 _华为快应用

解决方法

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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/consumer/cn/doc/development/quickApp-References/quickapp-component-map

 

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