更新:

2018-9-19 腾讯官方经纬度转详细地址详细地址转经纬度

index.wxml

<!--地图容器-->
<map id="myMap" style="width: 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='{{scale}}' polyline="{{polyline}}" markers="{{markers}}" covers="{{covers}}" show-location></map> 起点:<input placeholder='请输入起点' bindinput='getStart'></input>
终点:<input placeholder='请输入终点' bindinput='getEnd'></input> 两点之间的距离:{{resultDistance}} <!--绑定点击事件-->
<button bindtap="driving" disabled='{{openNav}}'>开始导航</button>

  

index.wxss

input{
border: 1px solid #aaa;
}

  

index.js

 // let coors;
// // 引入SDK核心类
let QQMapWX = require('./qqmap-wx-jssdk.min.js'); // 实例化API核心类
let qqmapsdk = new QQMapWX({
key: '填写地图key'
}); Page({ /**
* 页面的初始数据
*/
data: {
openNav: true
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let _page = this; wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
_page.setData({
latitude: res.latitude,
longitude: res.longitude,
scale: 10
});
}
})
wx.clearStorageSync('latlngstart');
wx.clearStorageSync('latlngend');
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 起点
*/
getStart(e) {
let _page = this; /**
* 修改:以前示例(2018-09-15)地址转经纬度用错接口了
*/
56 qqmapsdk.getSuggestion({
57 keyword: e.detail.value,
58 success: function (res) {
59 let lat = res.data[0].location.lat;
60 let lng = res.data[0].location.lng;
61
62 wx.setStorageSync('latlngstart', {
63 lat: lat,
64 lng: lng
65 });
66 },
67 fail: function (res) {
68 console.log(res);
69 },
70 complete: function (res) {
71 console.log(res);
72 }
73 }); /**
* 修改为(2018-09-19)
*/ 80 qqmapsdk.geocoder({
81 address: res.address,
82 success: function(res) {
83 let lat = res.result.location.lat;
84 let lng = res.result.location.lng;
85 wx.setStorageSync('latlngendSend', {
86 lat: lat,
87 lng: lng
88 });
89
90 // 起点经纬度
91 let latStart = wx.getStorageSync('latlngstartSend').lat;
92 let lngStart = wx.getStorageSync('latlngstartSend').lng;
93
94 // 终点经纬度
95 let latEnd = wx.getStorageSync('latlngendSend').lat;
96 let lngEnd = wx.getStorageSync('latlngendSend').lng;
97
98 qqmapsdk.calculateDistance({
99 to: [{
100 latitude: latStart,
101 longitude: lngStart
102 }, {
103 latitude: latEnd,
104 longitude: lngEnd
105 }],
106 success: function(res) {
107 console.log(res, '两点之间的距离(代送):', res.result.elements[1].distance);
108 wx.setStorageSync('kmSend', res.result.elements[1].distance + "");
109 }
110 });
111 }
112 });
// 如果输入地点为空:则不规划路线
if (e.detail.value == '') {
_page.setData({
openNav: true,
resultDistance: ''
});
} else {
_page.setData({
openNav: false
});
}
}, /**
* 终点
*/
getEnd(e) {
let _page = this;
// 输入地点获取经纬度,我取得是数据的第一条数据.
qqmapsdk.getSuggestion({
keyword: e.detail.value,
success: function (res) {
let lat = res.data[0].location.lat;
let lng = res.data[0].location.lng; wx.setStorageSync('latlngend', {
lat: lat,
lng: lng
});
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
// 如果输入地点为空:则不规划路线
if (e.detail.value == '') {
_page.setData({
openNav: true,
resultDistance: ''
});
} else {
_page.setData({
openNav: false
});
}
},
//事件回调函数
driving: function () { let _page = this; // 起点经纬度
let latStart = wx.getStorageSync('latlngstart').lat;
let lngStart = wx.getStorageSync('latlngstart').lng; // 终点经纬度
let latEnd = wx.getStorageSync('latlngend').lat;
let lngEnd = wx.getStorageSync('latlngend').lng; _page.setData({
latitude: latStart,
longitude: lngStart,
scale: 16,
markers: [{
id: 0,
latitude: latStart,
longitude: lngStart,
// 起点图标
iconPath: '../image/location.png'
},
{
id: 1,
latitude: latEnd,
longitude: lngEnd,
// 终点图标
iconPath: '../image/location.png'
},
]
});
`` /**
* 获取两点的距离
*/
qqmapsdk.calculateDistance({
to: [{
latitude: latStart,
longitude: lngStart
}, {
latitude: latEnd,
longitude: lngEnd
}],
success: function (res) {
console.log(res, '两点之间的距离:', res.result.elements[1].distance);
_page.setData({
resultDistance: res.result.elements[1].distance + '米'
});
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
}); //网络请求设置
let opt = {
//WebService请求地址,from为起点坐标,to为终点坐标,开发key为必填
url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${latStart},${lngStart}&to=${latEnd},${lngEnd}&key=${qqmapsdk.key}`,
method: 'GET',
dataType: 'json',
//请求成功回调
success: function (res) {
let ret = res.data
if (ret.status != 0) return; //服务异常处理
let coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压(返回的点串坐标,通过前向差分进行压缩)
let kr = 1000000;
for (let i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (let i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
//设置polyline属性,将路线显示出来
_page.setData({
polyline: [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
}
};
wx.request(opt);
}
})
 示例下载:点击下载

微信小程序 - 输入起点、终点获取距离并且进行路线规划(腾讯地图)的更多相关文章

  1. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  2. 解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)

    前端同事在做微信小程序时发现IOS获取的时间戳为空的问题,后来通过跟踪发现,原来是因为IOS系统不支持2017-01-01格式的时间导致的, var mydata = '2017-01-01 11:0 ...

  3. 微信小程序:java后台获取openId

    一.功能描述 openId是某个微信账户对应某个小程序或者公众号的唯一标识,但openId必须经过后台解密才能获取(之前实现过前台解密,可是由于微信小程序的种种限制,前台解密无法在小程序发布后使用) ...

  4. 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

    前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获 ...

  5. 在微信小程序中,如何获取 for 循环的 index

    微信小程序中,for 循环的 index(索引值)可以用wx:for-index="index"来获取. <view class="item" wx:fo ...

  6. 微信小程序request请求动态获取数据

    微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...

  7. 微信小程序踩坑之获取手机号

    最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在 ...

  8. 微信小程序模板发送,openid获取,以及api.weixin.qq.com不在合法域名内解决方法

    主要内容在标题三,老手可直接跳到标题三. 本文主要解决个人开发者模板消息发送的问题(没有服务器,不能操作服务器的情况) 针对api.weinxin.qq.com不在以下合法域名列表内的问题提出的解决方 ...

  9. 微信小程序登录(包括获取不到unionid的情况)

    我们一般都是先获取到微信的 unionid,然后再通过 unionid 去登录自己的网站,就可以关联到用户在自己网站上的 user_id,但是在小程序登录中,有时候可以获取到 unionid,有时候获 ...

随机推荐

  1. hdu1232 畅通工程 并查集的 应用

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. Python入门基础知识(1) :locals() 和globals()

    Python有两个内置的函数,locals() 和globals(),它们提供了基于字典的访问局部和全局变量的方式. 首先,是关于名字空间的一个名词解释.是枯燥,但是很重要,所以要耐心些.Python ...

  3. 使用matplotlib绘图(一)之折线图

    # 使用matplotlib绘制折线图 import matplotlib.pyplot as plt import numpy as np # 在一个图形中创建两条线 fig = plt.figur ...

  4. 【BZOJ 2436】 2436: [Noi2011]Noi嘉年华 (区间DP)

    2436: [Noi2011]Noi嘉年华 Description NOI2011 在吉林大学开始啦!为了迎接来自全国各地最优秀的信息学选手,吉林大学决定举办两场盛大的 NOI 嘉年华活动,分在两个不 ...

  5. 【DP】BZOJ1592-[Usaco2008 Feb]Making the Grade 路面修整

    我活着从期中考试回来了!!!!!!!!!备考NOIP!!!!!!!!! [题目大意] 给出n个整数a1~an,修改一个数的代价为修改前后差的绝对值,问修改成不下降序列或者不上升序列的最小总代价. [思 ...

  6. poj2117 Electricity

      试题描述 求一个图删除一个点之后,联通块最多有多少. 输入 多组数据.第一行两个整数 P,C 表示点数和边数.接下来 C 行每行两个整数 p1,p2,表示 p1 与 p2 有边连接,保证无重边.读 ...

  7. Codeforces Beta Round #9 (Div. 2 Only) E. Interesting Graph and Apples 构造题

    E. Interesting Graph and Apples 题目连接: http://www.codeforces.com/contest/9/problem/E Description Hexa ...

  8. hihocoder 162周 1323 : 回文字符串

    hihocoder1323 : 回文字符串(162周) 题目链接 思路: dp; ac代码: #include<iostream> #include<cstdio> #incl ...

  9. IPtables/NetFilter

    前提知识 任何主机若要与非同网络中的主机通信,则必须将报文发送到默认网关: 对Linux而言,IP地址是属于主机(内核中)的,不属于网卡,只要属于当前主机的IP地址间,都可直接响应,不称为转发 私有地 ...

  10. mui中a标签的跳转问题

    一.脑补 快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去 ...