微信小程序地图添加marker

原创已于 2023-07-08 15:43:28 修改 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

于 2023-07-08 15:40:23 首次发布

微信小程序专栏收录该内容

14 篇文章

订阅专栏

文章展示了如何在uniapp开发的微信小程序里集成腾讯地图，并向地图上添加标记。通过遍历driverList数组，创建包含id、经纬度、宽高和标签信息的标记对象，然后利用uni.createMapContext的方法将这些标记添加到地图上，同时提供了清除旧标记的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章是在uniapp开发的微信小程序中使用腾讯地图，在地图上添加标记

// 添加地图标记的方法

   addMarkers(driverList) { //driverList为需要添加到地图标记上的司机数组
               const markers = [] //地图标记数组
               driverList.forEach(item => {
                   markers.push({
                       id: item.driverId, // 唯一标识符
                       latitude: item.latitude,//纬度
                       longitude: item.longitude,//经度
                       width: 20,//地图icon的宽度
                       height: 20,//地图icon的高度
                       label: { //标记的提示文字的样式
                           width: 50,
                           height: 30,
                           borderRadius: 10,
                           content: item.nickName,//提示内容
                           color: '#fff',
                           bgColor: '#8cc540'
                       }
                   })
               })
               uni.createMapContext("isMap", this).addMarkers({ //调用uniapp地图组件的方法，进行标记，“isMap”为地图组件的id
                   markers, //需要标记的数组
                   clear: true,//标记时，是否清除上一次留下来的标记
               })
           },

效果如图所示