1：申請key:

https://lbs.qq.com/dev/console/application/mine

網址：

https://note.youdao.com/ynoteshare/index.html?id=f4bce6ad3877f203874d8cb490f73925&type=note&_time=1646188518511

2

3:

4:

5:

6:

// 引入SDK核心類，js檔案根據自己業務，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        
 
// 例項化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請的key'
        });
    },
    onShow: function () {
        // 呼叫介面
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})
 

7:

8:

8

9:

ml:

<!-- !--輸入起點和終點經緯度座標，格式為string格式 -->
<label>起點座標:
    <input style="border:1px solid #000;" name="start" bindfocus="startLocation" value="{{startName}}"></input>
</label>
        <!--多個終點位置示例：39.984060,116.307520;39.984060,116.507520-->
<label>終點座標:
    
 
<input style="border:1px solid #000;" name="dest" bindfocus="endLocation" value="{{endName}}"></input>
</label>
        <!--提交表單資料-->
<button bindtap="distance">計算距離</button>

        <!--渲染起點經緯度到終點經緯度距離，單位為米-->
<view wx:for="{{distance}}" wx:key="index">
    <view>{{startName}}到{{endName}}的步行距離為{{item}}米</view>
</view>

js:

// pages/map/map.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        imgArr: [],
        start: '',
        startName: '',
        end: '',
        endName: ''
    },

    /**
     * 生命週期函式--監聽頁面載入
     */
    onLoad: function (options) {
        qqmapsdk = new QQMapWX({
            key: 'HPMBZ-7W3KX-L5T4W-TXZFM-NXEU7-24FKQ'
        });
    },
    //在Page({})中使用下列程式碼
    //事件觸發，呼叫介面
    distance(e) {
        var _this = this;
        //呼叫距離計算介面
        qqmapsdk.calculateDistance({
            //mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填預設：'walking',可不填
            //from引數不填預設當前地址
            //獲取表單提交的經緯度並設定from和to引數（示例為string格式）
            from: this.data.start || '', //若起點有資料則採用起點座標，若為空預設當前地址
            to: this.data.end, //終點座標
            success: function (res) {//成功後的回撥
                var res = res.result;
                var dis = [];
                for (var i = 0; i < res.elements.length; i++) {
                    dis.push(res.elements[i].distance); //將返回資料存入dis陣列，
                }
                _this.setData({ //設定並更新distance資料
                    distance: dis
                });
            },
            fail: function (error) {
                console.error(error);
            },
            complete: function (res) {
                console.log(res);
            }
        });
    },
    startLocation() {
        wx.getLocation({
            type: 'wgs84',
            success: res => {
                const latitude = res.latitude
                const longitude = res.longitude

                wx.chooseLocation({
                    latitude: latitude,
                    longitude: longitude,
                    success: ret => {
                        let start = ret.latitude + ',' + ret.longitude
                        this.setData({
                            start: start,
                            startName: ret.address
                        })
                    }
                })
            }
        })

    },
    endLocation() {
        wx.getLocation({
            type: 'wgs84',
            success: res => {
                const latitude = res.latitude
                const longitude = res.longitude

                wx.chooseLocation({
                    latitude: latitude,
                    longitude: longitude,
                    success: ret => {
                        let end = ret.latitude + ',' + ret.longitude
                        this.setData({
                            end: end,
                            endName: ret.address
                        })
                    }
                })
            }
        })

    },

   
})

效果圖：