微信小程序 Map的简单使用

map.wxml

<view>
  <map class='map' latitude='{{latitude}}' longitude='{{longitude}}' scale='{{scale}}' markers='{{markers}}'/>
</view>

map.wxss

.map{
  width: 100%;
  height: 500rpx;
}

map.js

const app = getApp()

Page({
  data: {
    scale: 18,
    latitude: "",
    longitude: "",
    markers: [],
  },

  onLoad: function () {
    var that = this;
    wx.getLocation({
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [{
            id: "1",
            latitude: res.latitude,
            longitude: res.longitude,
            width: 20,
            height: 20,
            iconPath: "/resources/img/ic_marker.png"
          }],
        })
      },
    })
  }
})

效果

image