- 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;
- // 关键字补全以及获取经纬度
- 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('latlngstart', {
- lat: res.data[0].location.lat,
- lng: res.data[0].location.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
- });
- }
- },
- /**
- * 终点
- */
- 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: res.data[0].location.lat,
- lng: res.data[0].location.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);
- }
- })
示例下载: http://www.playsort.cn/%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E8%B7%AF%E7%BA%BF%E8%A7%84%E5%88%92.zip
来源: http://www.bubuko.com/infodetail-2768976.html