微信小程序如何实现地图多点标注

简介: 微信小程序如何实现地图多点标注

1.首先使用微信小程序自带<map>标签,并且设置好宽高让地图显示,用longitude和latitude表示中心点

<map id="myMap" longitude="113.324520" latitude="23.099994" markers="{{markers}}" show-location></map>
Page({
  data: {
    markers: [
      {
        id: 1,
        latitude: 23.099994,
        longitude: 113.324520,
        title: 'Marker 1',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30
      },
      {
        id: 2,
        latitude: 23.097330,
        longitude: 113.327420,
        title: 'Marker 2',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30
      }
    ]
  }
});

定义一个 markers 数组,其中每个元素表示一个标记点,包含了标记点的经纬度、标题、图标路径以及图标的宽度和高度等信息。


通过将 markers 数组绑定到地图组件的 markers 属性上,即可在地图上显示对应的标记点。


需要注意的是,每个标记点对象中必须包含 id、latitude、longitude 这三个属性,分别表示标记点的唯一标识、纬度和经度。


相关文章
|
6月前
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
49 0
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
111 1
|
5月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
203 4
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
351 0
|
4月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
82 0
|
6月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
316 0
|
6月前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
6月前
|
小程序 JavaScript 定位技术
微信小程序地图控件Map的使用
微信小程序地图控件Map的使用
166 0
|
6月前
|
小程序 定位技术 API
微信小程序引入地图
微信小程序引入地图
156 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
245 3
下一篇
无影云桌面