The use of wechat mini program map on August 7, 2020

<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 class="btn-area">
    <button bindtap="getCenterLocation" class="page-body-button" type="primary">To obtain position</button>
    <button bindtap="moveToLocation" class="page-body-button" type="primary">Mobile location</button>
    <button bindtap="translateMarker" class="page-body-button" type="primary">Mobile tagging</button>
    <button bindtap="includePoints" class="page-body-button" type="primary">Zoom view shows all latitude and longitude</button>
  </view>
</view>
Copy the code

Page({
  data: {
    latitude: 23.099994.longitude: 113.324520.markers: [{
      id: 1.latitude: 23.099994.longitude: 113.324520.name: 'T.I.T Creative Park '}].covers: [{
      latitude: 23.099994.longitude: 113.344520.iconPath: '/image/location.png'
    }, {
      latitude: 23.099994.longitude: 113.304520.iconPath: '/image/location.png'}},onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')},getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1.autoRotate: true.duration: 1000.destination: {
        latitude:23.10229.longitude:113.3345211,},animationEnd() {
        console.log('animation end')}})},includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10].points: [{
        latitude:23.10229.longitude:113.3345211}, {latitude:23.00229.longitude:113.3345211,}]})})Copy the code