微信小程序|组件-地图map

1.效果图

2. wxml代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>
  </view>

</view>

3. js代码

Page({
  data: {
    latitude: 23.099994,//显示的地图中心经纬度
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,//标记点的经纬度
      longitude: 113.324520,
      name: 'T.I.T 创地点意园'
    }]
  
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  }
})