微信小程序使用腾讯地图
1、介绍腾讯地图
官方文档: /
这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划、地址转坐标+计算距离、坐标转地址、定位;
2、介绍实现功能
(1)申请腾讯地图key值
只有先完成申请key值,才可以使用接下来的功能;
(2)地图路线规划
地图路线规划,直接可以使用腾讯地图自己生成的插件去写,很方便;首先看文档
然后我们根据文档所描述的一步步进行下去,首先把app.json中引入插件包: 路线规划appId: wx50b5593e81dd937a ;这个appId跟你自己自身的appId没有关系,他等于是给了一个新的appId给你,是一个新的入口,引入了另一个小程序,这个地方的appId是固定死的,所以不用动,直接搬过去就好。然后设置定位授权:路线规划插件需要小程序提供定位授权才能够正常使用定位功能,同样也是在app.json中,甩代码:
"plugins": {"routePlan": {"version": "1.0.14","provider": "wx50b5593e81dd937a"}},"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位"}},
之后在页面引用中:
map(e) {let plugin = requirePlugin('routePlan');let key = '6CBBZ-QOL3S-BOHOU-6AIJQ-WEBIQ-MHFR2'; //使用在腾讯位置服务申请的key,这个地方需要用你刚刚申请过来的key值才可以进入let referer = 'mapName'; //调用插件的app的名称let endPoint = JSON.stringify({//终点'name': '北京西站','latitude': 39.894806,'longitude': 116.321592});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint});},
我这里是直接给了按钮一个点击事件,所以点击按钮完成之后,跳转的页面是这个样子的;这个样子之后呢,他告诉我需要去选择一下那个api,这里自己有需要的话可以去腾讯地图添加:
(3)坐标转地址,地址转坐标,计算距离都在这边
这个地方的话,就需要引入微信小程序JavaScriptSDK的的模块了
根据步骤,我们依次进行
前面两步申请key值,开通服务都有过了,第三步下载
我是直接拿过来放在了utils里面,页面引用的时候也是根据这个路径来
//触发表单提交事件,调用接口// 引入SDK核心类var QQMapWX = require('../../../utils/qqmap-wx-jssdk');// 实例化API核心类var qqmapsdk = new QQMapWX({key: 'V7XBZ-GSUK3-WKU3B-YBVZE-PTAZ3-VFFAE' // 必填});
在wxml中写入地图容器
地址转坐标
<!--地图容器--><!--longitude及latitude为设置为调转到指定地址位置,默认不显示--><map id="myMap"markers="{{markers}}"style="width:100%;height:300px;"longitude="{{poi.longitude}}"latitude="{{poi.latitude}}"scale='16' show-location></map><!--form表单--><form bindsubmit="formSubmit"><!--地址描述输入框,示例:北京市海淀区彩和坊路海淀西大街74号--><input style="border:1px solid #000;" name="geocoder"></input><!--提交表单数据--><button form-type="submit">地址解析</button></form><!--地址描述经纬度展示--><view>地址纬度:{{poi.latitude}}</view><view>地址经度:{{poi.longitude}}</view>
在js中
// 引入SDK核心类var QQMapWX = require('xxx/qqmap-wx.js');// 实例化API核心类var qqmapsdk = new QQMapWX({key: '开发密钥(key)' // 必填});//在Page({})中使用下列代码//触发表单提交事件,调用接口formSubmit(e) {var _this = this;//调用地址解析接口qqmapsdk.geocoder({//获取表单传入地址address: e.detail.value.geocoder, //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号'success: function(res) {//成功后的回调console.log(res);var res = res.result;var latitude = res.location.lat;var longitude = res.location.lng;//根据地址解析在地图上标记解析地址位置_this.setData({// 获取返回结果,放到markers及poi中,并在地图展示markers: [{id: 0,title: res.title,latitude: latitude,longitude: longitude,iconPath: './resources/placeholder.png',//图标路径width: 20,height: 20,callout: {//可根据需求是否展示经纬度content: latitude + ',' + longitude,color: '#000',display: 'ALWAYS'}}],poi: {//根据自己data数据设置相应的地图中心坐标变量名称latitude: latitude,longitude: longitude}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})}
坐标转地址
在wxml中:
<!--地图容器--><!--longitude及latitude为设置为调转到指定坐标位置,默认不显示--><map id="myMap"markers="{{markers}}"style="width:100%;height:300px;"longitude="{{poi.longitude}}"latitude="{{poi.latitude}}" scale='16' show-location></map><!--form表单--><form bindsubmit="formSubmit"><!--地址输入框,例:39.984060,116.307520--><input style="border:1px solid #000;" name="reverseGeo"></input><!--提交表单按钮--><button form-type="submit">逆地址解析</button></form><view>当前位置为:{{markers[0].title}}</view>
在js中:
// 引入SDK核心类var QQMapWX = require('xxx/qqmap-wx.js');// 实例化API核心类var qqmapsdk = new QQMapWX({key: '开发密钥(key)' // 必填}); //在Page({})中使用下列代码//触发表单提交事件,调用接口formSubmit(e) {var _this = this;qqmapsdk.reverseGeocoder({//位置坐标,默认获取当前位置,非必须参数/*** //Object格式location: {latitude: 39.984060,longitude: 116.307520},*//***//String格式location: '39.984060,116.307520',*/location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式//get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数success: function(res) {//成功后的回调console.log(res);var res = res.result;var mks = [];/*** 当get_poi为1时,检索当前位置或者location周边poi数据并在地图显示,可根据需求是否使用*for (var i = 0; i < result.pois.length; i++) {mks.push({ // 获取返回结果,放到mks数组中title: result.pois[i].title,id: result.pois[i].id,latitude: result.pois[i].location.lat,longitude: result.pois[i].location.lng,iconPath: './resources/placeholder.png', //图标路径width: 20,height: 20})}***///当get_poi为0时或者为不填默认值时,检索目标位置,按需使用mks.push({// 获取返回结果,放到mks数组中title: res.address,id: 0,latitude: res.location.lat,longitude: res.location.lng,iconPath: './resources/placeholder.png',//图标路径width: 20,height: 20,callout: {//在markers上展示地址名称,根据需求是否需要content: res.address,color: '#000',display: 'ALWAYS'}});_this.setData({//设置markers属性和地图位置poi,将结果在地图展示markers: mks,poi: {latitude: res.location.lat,longitude: res.location.lng}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})}
计算距离,要根据自身定位,然后,跟目的地的经纬度,才可以计算:
wxml中:
<!--form表单--><form bindsubmit="formSubmit"><!--输入起点和终点经纬度坐标,格式为string格式--><label>起点坐标:<input style="border:1px solid #000;" name="start"></input></label><!--多个终点位置示例:39.984060,116.307520;39.984060,116.507520--><label>终点坐标:<input style="border:1px solid #000;" name="dest"></input></label><!--提交表单数据--><button form-type="submit">计算距离</button></form><!--渲染起点经纬度到终点经纬度距离,单位为米--><view wx:for="{{distance}}" wx:key="index"><view>起点到终点{{index+1}}的步行距离为{{item}}米</view></view>
在js中:
// 引入SDK核心类var QQMapWX = require('xxx/qqmap-wx.js');// 实例化API核心类var qqmapsdk = new QQMapWX({key: '开发密钥(key)' // 必填});//在Page({})中使用下列代码//事件触发,调用接口formSubmit(e){var _this = this;//调用距离计算接口qqmapsdk.calculateDistance({//mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填//from参数不填默认当前地址//获取表单提交的经纬度并设置from和to参数(示例为string格式)from: e.detail.value.start || '', //若起点有数据则采用起点坐标,若为空默认当前地址to: e.detail.value.dest, //终点坐标success: function(res) {//成功后的回调console.log(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);}});}
以上就是我今天要介绍的所有内容啦!!!欢迎大家一起交流学习。
微信小程序使用腾讯地图进行路线规划 坐标转地址 逆地理编码 计算目的地跟自身定位的距离