请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

1
回复
34
查看
[复制链接]

8

主题

9

帖子

85

积分

 楼主| 2021-4-30 10:02:59 显示全部楼层 |阅读模式

场景描述

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

回复

使用道具 举报

4

主题

29

帖子

165

积分

2021-4-30 15:42:01 显示全部楼层

啥都不说,直接上代码

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册