微信小程序使用腾讯地图

1、介绍腾讯地图

官方文档： https://lbs.qq.com/

这里，我主要运用的是这几个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);}});
}

以上就是我今天要介绍的所有内容啦！！！欢迎大家一起交流学习。