目的: 根据目的地的坐标计算自己手机的位置离目的地的距离的
核心思路: 后续操作必须等所有异步请求都返回了才能继续 使用

const qqmap = require("../../utils/qqmap-wx-jssdk.js")
var qqmapsdk;

onLoad: function () {
// 实例化API核心类
qqmapsdk = new qqmap({
key: '' //腾讯位置服务的key
});
this.data_list()
},
// 加载数据列表
data_list: function () {
const that =
this
const syncArr = []
const url = util.apiUrl +
'Index/index_show?program_id=' + app.program_id
util.request(url, 'post',
'', '正在加载数据',
function (res) {
for (let i =
0; i < res.data.k4.length; i++) {
syncArr.push(that.map(res.data.k4[i].sh_jd))
}
Promise.all(syncArr).then(results => {
for (let j =
0; j < results.length; j++) {
res.data.k4[j].sh_jd = results[j]
}
that.setData({
arr: res.data,
lunbo: res.data.k1,
images: res.data.k2,
nearby_merchant: res.data.k4
})
})
})
},
// 公共方法 根据腾讯地图接口获取计算距离http://lbs.qq.com/qqmap_wx_jssdk/method-calculatedistance.html
map(data) {
return new Promise((resolve) => {
const latitude = data.split(',')
qqmapsdk.calculateDistance({
to: [{
latitude: latitude[0],
longitude: latitude[1]
}],
success(res) {
const distance = Math.floor(res.result.elements[0].distance /
1000 * 100) /
resolve(distance)
},
fail() {
resolve('')
}
})
})
},

[微信小程序]计算自己手机到指定位置的距离的更多相关文章

  1. 微信小程序:scroll滑到指定位置

    概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...

  2. 微信小程序计算经纬距离

    微信小程序计算经纬距离 微信小程序计算两点间的距离 getDistance: function (lat1, lng1, lat2, lng2) { lat1 = lat1 || 0; lng1 = ...

  3. 微信小程序计算金额长度异常解决办法

    今天在做微信小程序,在测试的时候偶然出现了一些问题,如下图. 心中的一阵不爽猛然袭来,完全是搞事情哈! 然后经过一番探索,用toFixed方法搞定了,此方法是对值进行四舍五入的. 解决后点了一大堆控制 ...

  4. 微信小程序——计算2点之间的距离

    关于计算2点之间的距离都依赖了腾讯地图,所以请先在腾讯地图官网申请key.具体流程看下图: 下面具体讲计算2点之间距离的方法. 方法一: 1.通过 wx.getLocation(Object obje ...

  5. 微信小程序--背景图片手机无法预览

    目前小程序好像没有支持手机预览背景本地图片,所以将本地图片改为网络图片链接就可以了 background: url("https://..../img/no.png") no-re ...

  6. Taro开发微信小程序之初始化地图到当前位置

    在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...

  7. 微信小程序删除数组(删除对应指定下标数组中的元素)

    .js 使用arr.splice(id,1)删除 // 删除数组中指定下标 dele_time: function (e) { console.log('删除') console.log(e.curr ...

  8. 2020年python开发微信小程序,公众号,手机购物商城APP

    2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从0到大神的全部精解 2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从 ...

  9. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. 使用Photoshop合成两张不完整的图片

    一.准备工作 软件环境:PhotoshopCS6 目标:将两张不完整的图片合并成一张完整的图片. 二.操作步骤 1,新建一张画布,参数:15*12厘米,像素300. 2,对第一张不完整的图片选择魔棒工 ...

  2. HTML5实现摇一摇的功能(实测后)--转

    eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或 ...

  3. struts2系列(三):struts2配置详解

    原文链接:http://www.cnblogs.com/fmricky/archive/2010/05/20/1740479.html 1.<include> 利用include标签,可以 ...

  4. Java数组扩展

    Java中,数组初始化后如何扩展数组? 示例 以下示例显示如何在创建新并初始化数组后扩展数组. package com.yiibai; public class ExtendingArray { pu ...

  5. LintCode #3 统计数字

    解题思路请参考 代码(可以通过,不过很乱,需要整理): /// <summary> /// 计算n在数组[targetNum]中出现的次数 /// 形如:[0, 1, 2, 3, 4, 5 ...

  6. 使用selenium遇到java.lang.NoSuchMethodError: org.apache.xpath.XPathContext,排查

    初试selenium webdriver,运行小程序,抛如下错误:   java.lang.NoSuchMethodError: org.apache.xpath.XPathContext.<i ...

  7. 使用redis镜像

    运行容器 runoob@runoob:~/redis$ docker run -p : -v $PWD/data:/data -d redis:3.2 redis-server --appendonl ...

  8. Spock集成入门

    本文基于SpringBoot 在pom.xml添加Spock依赖 <!-- test --> <dependency> <groupId>org.codehaus. ...

  9. XCode 5资源文件不自动更新问题

    在xcode 5中的build settings ->build options ->Scan all source files and Includes设置为YES即可!

  10. 爬豆瓣影评,记下解决maximum recursion depth exceeded in cmp

    #主要是爬取后给别人做自然语言分析,没其他意思. #coding=utf8 import requests,re from lxml import etree import sys reload(sy ...