微信小程序中引入地图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangxinxinsj/article/details/86620225

index.js
获取gps准确的经纬度：http://www.gpsspg.com/maps.htm
获取后替换成你自己的想要的地址的纬度

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 31.8205700000,
    longitude: 117.2290100000,
    // 下面代码会在对应位置生成箭头
    markers: [{
      id: 1,
      latitude: 31.8205700000,
      longitude: 117.2290100000,
      name: 'T.I.T 创意园'
    }],
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },

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

index.wxss

.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}

.page-body-button {
  margin-bottom: 30rpx;
}