微信小程序地图实现标记多个位置-CSDN博客

《算法与编程之美》技术专栏荣获2020年腾讯云+社区“人气作者”优秀专栏，2021年荣获“CSDN博客专家”称号，全网累计阅读量突破100万人次。

本文链接：https://blog.csdn.net/gschen_cn/article/details/121045616

本文详细介绍了如何在微信小程序中添加多个地图标记点。首先在pages文件夹下创建image文件夹存放标记图片，然后在map标签内设置markers属性，接着在.js文件中定义markers数组，包含每个标记点的坐标、图标及标题。注意iconPath路径与图片实际位置一致，且markers需放在data中。通过腾讯地图坐标拾取器获取坐标。最后展示了实现后的效果，展示了四个标记点的分布。下期将讲解不同标记点的跳转。

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

1 问题

如何在微信小程序实现标记多个位置。

2 方法

1.在pages文件夹下新建image文件夹用来存放标记的图片。

2.在map标签中添加markers属性。

3.在.js文件中中添加markers属性。

markers: [
//貘科动物馆
{
id: 0,
iconPath: "../image/动物园.png",
latitude: 39.941386,
longitude: 116.336655,
width: 30, //图片显示宽度
height: 30,//图片显示高度
title:'貘科动物馆',
},
//犀鸟馆
{
id: 1,
iconPath: "../image/动物园.png",
latitude: 39.940826,
longitude: 116.335109,
width: 30,
height: 30,
title:'犀鸟馆'
},
//火烈鸟馆
{
id: 2,
iconPath: "../image/动物园.png",
latitude: 39.940578,
longitude: 116.335977,
width: 30,
height: 30,
title: '火烈鸟馆'
},
//鹦鹉馆
{
id: 3,
iconPath: "../image/动物园.png",
latitude: 39.941573,
longitude: 116.335544,
width: 30,
height: 30,
title: '鹦鹉馆'
}]

4.注意：

①iconpath属性的路径要与标记图片保存的路径一致；

②markers属性的代码要放在data{}里面，否则不会显示标记点；

③标记点的坐标可以在腾讯地图坐标拾取器（https://lbs.qq.com/getPoint/）中查询。