当前位置:   article > 正文

微信小程序如何实现地图多点标注_微信小程序高效地完成地图点位标注

微信小程序高效地完成地图点位标注

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

<map id="myMap" longitude="113.324520" latitude="23.099994" markers="{{markers}}" show-location></map>
  1. Page({
  2. data: {
  3. markers: [
  4. {
  5. id: 1,
  6. latitude: 23.099994,
  7. longitude: 113.324520,
  8. title: 'Marker 1',
  9. iconPath: '/images/marker.png',
  10. width: 30,
  11. height: 30
  12. },
  13. {
  14. id: 2,
  15. latitude: 23.097330,
  16. longitude: 113.327420,
  17. title: 'Marker 2',
  18. iconPath: '/images/marker.png',
  19. width: 30,
  20. height: 30
  21. }
  22. ]
  23. }
  24. });

 

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/495247
推荐阅读
相关标签
  

闽ICP备14008679号