微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

IT博客技术分享

已于 2024-03-17 15:39:42 修改

阅读量2.3k

点赞数 12

分类专栏：微信小程序文章标签：小程序地图map组件

于 2024-03-16 21:03:27 首次发布

本文链接：https://blog.csdn.net/qq_41646249/article/details/136769337

版权

本文介绍了如何在微信小程序中使用map组件实现地图上多个位置的标记，并详细讲解了如何自定义callout气泡，包括设置iconpath、markers属性的正确使用，以及解决cover-view宽度不自适应的问题。

摘要由CSDN通过智能技术生成

一、老规矩先上效果图:

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

三、代码片段也可以参考小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

index.wxml代码

 <map
 id="map"
 style="width: 100%; height:100%;"
 scale="17"
 markers="{
  {markers}}"
 longitude="116.336590"
 latitude="39.941127"
 show-location>
 </map>

js代码： // 在.js文件中中添加markers属性。

markers: [
   {
     id: 0,
     iconPath: "../image/1.png",
     latitude: 39.941386,
     longitude: 116.336655,
     width: 30,  //图片显示宽度
     height: 30,//图片显示高度
     title:'1',
   },
   {
     id: 1,