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

一、老规矩先上效果图:

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

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

index.wxml代码 

 <mapid="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,icon