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

地图（定位，多个标记点）

效果图：

.
.
.

使用的是微信自带的腾讯地图，
使用起来方便，简单，代码也很好理解
喜欢的朋友请收藏
.
.
.
.
.
.

.js代码：

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 () {
    var that = this;

    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        var latitude = res.latitude;
        var longitude = res.longitude;
        console.log("当前位置的经纬度为：", res.latitude, res.longitude);
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,

        })
      }
    })
  },
  onReady: function () {

  },

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

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

.
.
.

.wxss代码：

page{
  height: 100%;
}

.
.
.
.

.wxml代码：

<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>

.
.
.

app.json增加代码：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

图标 1.png