微信小程序使用腾讯地图
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);
}
});
}
以上就是我今天要介绍的所有内容啦！！！欢迎大家一起交流学习。
扫一扫
3319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
