微信小程序——地图（定位，多个标记点）

效果图

指定为位置

Page({
  data: {
    longitude: 113.14278, //地图界面中心的经度
    latitude: 23.02882, //地图界面中心的纬度
    markers: [ //标志点的位置
      //位置0
      {
        id: 0,
        iconPath: "../images/1.png",
        latitude: 23.04308268848755,
        longitude: 113.13562655285273,
        width: 28,
        height: 32
      },
      //位置1
      {
        id: 1,
        iconPath: "../images/1.png",
        latitude: 23.03814334110172,
        longitude: 113.15378758608608,
        width: 28,
        height: 32
      },
      //位置2
      {
        id: 2,
        iconPath: "../images/1.png",
        latitude: 23.03377135768493,
        longitude: 113.17075479351229,
        width: 28,
        height: 32
      },
      //位置3
      {
        id: 3,
        iconPath: "../images/1.png",
        latitude: 23.02542516569787,
        longitude: 113.1417505798413,
        width: 28,
        height: 32
      },
      //位置4
      {
        id: 4,
        iconPath: "../images/1.png",
        latitude: 23.022740816325694,
        longitude: 113.14681189547798,
        width: 28,
        height: 32
      },
    ]
  },

  onLoad: function () {

  },
  onReady: function () {

  },

  /**
   * 地图放大缩小事件触发
   * @param {*} e 
   */
  bindregionchange(e) {
    console.log('=bindregiοnchange=', e)
  },

  /**
   * 点击地图事件，有经纬度信息返回
   * @param {*} e 
   */
  bindtapMap(e) {
    console.log('=bindtapMap=', e)
  }
})

page{
  height: 100%;
}

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;">

  <map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="14" show-location
    style="width: 100%; height: 100%;" bindregionchange="bindregionchange" bindtap="bindtapMap"></map>

</view>

图标 1.png

示例2：

Page({
  data: {
    latitude: 23.04308268848755, //地图界面中心的纬度
    longitude: 113.13562655285273, //地图界面中心的经度

    // markers: [ //标志点的位置
    //   //位置0
    //   {
    //     id: 0,
    //     iconPath: "../images/1.png",
    //     latitude: 23.04308268848755,
    //     longitude: 113.13562655285273,
    //     width: 28,
    //     height: 32
    //   },
    //   //位置1
    //   {
    //     id: 1,
    //     iconPath: "../images/1.png",
    //     latitude: 23.03814334110172,
    //     longitude: 113.15378758608608,
    //     width: 28,
    //     height: 32
    //   },
    //   //位置2
    //   {
    //     id: 2,
    //     iconPath: "../images/1.png",
    //     latitude: 23.03377135768493,
    //     longitude: 113.17075479351229,
    //     width: 28,
    //     height: 32
    //   },
    //   //位置3
    //   {
    //     id: 3,
    //     iconPath: "../images/1.png",
    //     latitude: 23.02542516569787,
    //     longitude: 113.1417505798413,
    //     width: 28,
    //     height: 32
    //   },
    //   //位置4
    //   {
    //     id: 4,
    //     iconPath: "../images/1.png",
    //     latitude: 23.022740816325694,
    //     longitude: 113.14681189547798,
    //     width: 28,
    //     height: 32
    //   },
    // ]

    markers: []

  },

       //定义js函数对象方法
mapPoint(id,iconPath,latitude,longitude,width,height) {
      return {"id":id,
              "iconPath":iconPath,  
              "latitude":latitude,
              "longitude":longitude,  
              "width":width,
              "height":height
               };     
     },
  
  onLoad: function () {
    var that = this;

   
    wx.getLocation({
      type: "wgs84",

      success: function (res) {
        var latitude = res.latitude;
        var longitude = res.longitude;
        console.log("当前位置的经纬度为：", res.latitude, res.longitude);
        var newArray1 = new Array();

        //  newArray1.push(  {
        //   id: 0,
        //   iconPath: "../images/1.png",
        //   latitude: 23.04308268848755,
        //   longitude: 113.13562655285273,
        //   width: 28,
        //   height: 32
        // });
        // newArray1.push(  {
        //   id: 1,
        //   iconPath: "../images/1.png",
        //   latitude: 23.03814334110172,
        //   longitude: 113.15378758608608,
        //   width: 28,
        //   height: 32
        // });
        // newArray1.push({"id":2,
        // "iconPath":"../images/1.png",  
        // "latitude": res.latitude - 0.001,
        // "longitude":res.longitude - 0.002,  
        // "width":28,
        // "height":32
        //  });

         console.log("newArray1:",newArray1);
        for(var i =0; i<5 ;i++) {
          newArray1.push({"id":i,
          "iconPath":"../images/1.png",  
          "latitude": res.latitude - 0.001*i,
          "longitude":res.longitude - 0.001*i,  
          "width":28,
          "height":32
           })
        };
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: newArray1,
        })

    
      }
    })
  },
  onReady: function () {

  },

  /**
   * 地图放大缩小事件触发
   * @param {*} e 
   */
  bindregionchange(e) {
    console.log('=bindregiοnchange=', e)
  },

  /**
   * 点击地图事件，有经纬度信息返回
   * @param {*} e 
   */
  bindtapMap(e) {
    console.log('=bindtapMap=', e)
  }
})