微信小程序如何获取位置展示地图并标注信息

微信小程序如何获取位置展示地图并标注信息，废话不多说，直接上代码。

wxcs：

.view-map{
  padding:30rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 0 8rpx #ddd;
  width: 470rpx;
}
.view-map-ti{
  font-size:32rpx;
  line-height: 32rpx;
}
.view-map-address{
  font-size: 20rpx;
  line-height: 24rpx;
  padding:8rpx 0; 
  color:#666;
}
.view-map-tel{
  font-size: 24rpx;
  line-height: 30rpx;
  color:#00aff8;
}

wxjs:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  },
  onLoad: function () {
    var self=this;
    this.mapCtx = wx.createMapContext('myMap');
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        self.setData({
          latitude : res.latitude,
          longitude : res.longitude,
          markers: [{
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: '/image/location.png',
            customCallout:{
              display:'BYCLICK'
            }
          },
            {
              id: 2,
              latitude: res.latitude,
              longitude: res.longitude+0.01,
              iconPath: '/image/location.png',
              customCallout:{
                display:'BYCLICK'
              }
            }
          ],
        });
      }
    })
  },
})

wxml:

<map
            id="myMap"
            style="width: 100%; height:100vh;"
            latitude="{{latitude}}"
            longitude="{{longitude}}"
            markers="{{markers}}"
            covers="{{covers}}"
            show-location
          >
          <cover-view slot="callout">
            <cover-view marker-id="1">
              <cover-view class="view-map">
                  <cover-view class="view-map-ti">名称***</cover-view>
                  <cover-view class="view-map-address">地址*****</cover-view>
                  <cover-view class="view-map-tel" bindtap='freeTell'>电话联系</cover-view>
              </cover-view>
            </cover-view>
            <cover-view marker-id="2">
                <cover-view class="view-map">
                  <cover-view class="view-map-ti">郑州******</cover-view>
                  <cover-view class="view-map-address">显示地址******</cover-view>
                  <cover-view class="view-map-tel" bindtap='freeTell'>电话联系</cover-view>
              </cover-view>
            </cover-view>
          </map>

代码内容来源于：wp.wk517.com/archives/721