微信小程序两点之间的距离

本文主要是介绍微信小程序两点之间的距离，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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({
 
    onl oad: 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: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onl oad: 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
                        })
                    }
                })
            }
        })

    },

   
})

效果图：

这篇关于微信小程序两点之间的距离的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！