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

一、老规矩先上效果图:

 二、在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,
     icon