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

2022-03-06 20:00:09 阅读：176 来源： 互联网

标签：function 微信两点程序 longitude var ret res latitude

1：申请key:

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

网址：

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

// 引入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);
        }
     });
  }
})

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
                        })
                    }
                })
            }
        })

    },

   
})

效果图：

标签：function,微信,两点,程序,longitude,var,ret,res,latitude
来源： https://www.cnblogs.com/xiaoyantongxue/p/15973193.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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