微信小程序之使用腾讯地图

微信小程序开发经常遇到一些定位，或者计算距离的问题。如图：

WXML

<view class="bg-white" style="height: 180rpx;">
    <view class="text-xl bg-white margin-left-lg" style="font-weight: 800;">水浒烤肉<text class="cuIcon-right"></text></view>
    <view class="margin-left-lg text-gray margin-top-sm text-sm">距离您{{distance}}km</view>
    <view class="cuIcon-appreciate margin-left-lg margin-top-sm text-gray text-sm">欢迎光临，很高兴为您服务</view>
</view>

JavaScript

在page前面引入

var QQMapWX =require('../../qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js')
var qqmapsdk;

在onLoad()中编写代码

    onLoad: function (options) {
        wx.showLoading({
            title: '加载中...',
            mask: true
        });
        qqmapsdk = new QQMapWX({
            key: 'AFSBZ-QAIKX-5OO46-Z3PUR-JG4MK-X4BDY'
        });
        let _this=this
        qqmapsdk.geocoder({
          //获取表单传入地址
          address: '郑州市二七区大学南路8号13号楼107号', //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
          success: function(res) {//成功后的回调
            console.log(res);
            var res = res.result;
            var latitude = res.location.lat;
            var longitude = res.location.lng;
            console.log(res)
            //根据地址解析在地图上标记解析地址位置
            _this.setData({ // 获取返回结果，放到markers及poi中，并在地图展示
              poi: { //根据自己data数据设置相应的地图中心坐标变量名称
                latitude: latitude,
                longitude: longitude
              }
            });
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
            _this.formSubmit()
          }
        })
        }