前端工程师必备之腾讯地图（一）
前端工程师必备之腾讯地图（二）
4.个性化地图样式
为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。
image
为什么选择腾讯位置服务个性化地图：
- 全平台通用
- 开发成本极小
- 个性化样式支持动态更新
- 支持全局配置和分级配置
- 编辑平台UI控件全面优化
- 每个元素可配置的属性全部开放
- 能够支持自定义的地图元素扩充为52种
5.腾讯位置入门步骤
1.登录腾讯位置服务
image
2.验证手机 与 邮箱
3.申请开发密钥（Key）
4.选择您需要的产品
位置展示组件
image
路线规划组件
image
image
image
image
前端定位组件
image
三.微信小程序JavaScript SDK
1.我申请了开发者密钥key
2.开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
日调用量：1万次 / Key----并发数：5次 / key / 秒 。
onLoad() {
console.log('页面加载了')
// 实例化API核心类
qqmapsdk = new QQMapWX({
// key: '申请的key'
});
},
onShow() {
console.log('页面显示了')
// 调用接口dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
},
complete: (cres) => {
console.log(cres);
}
})
},
我返回的数据如图：
image
QQMapWX – 小程序JavaScriptSDK核心类 – new QQMapWX(options:Object)
image
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
// 实例化API核心类
var demo = new QQMapWX({
key: '开发密钥（key）' // 必填
});
地点搜索：
// 地点搜索
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', //搜索关键词
location: '39.980014,116.313972', //设置周边搜索中心点
success: (res) => {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果，放到mks数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/location.png", //图标路径
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {
console.log(res);
},
complete: (res) => {
console.log(res);
}
});
},
效果如图：
image
<script>
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
// var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js');
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: '',
markers: [],
suggestion: [],
}
},
onLoad() {
console.log('页面加载了') // 实例化API核心类
qqmapsdk = new QQMapWX({ // key: '申请的key'
key: '自己申请，我的就不放出来了'
});
},
onShow() {
console.log('页面显示了') // 调用接口dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
},
complete: (cres) => {
console.log(cres);
}
})
},
onReady() {
console.log('页面初次渲染完成了')
},
methods: {
getsuggest(e) {
console.log(e.detail.value)
qqmapsdk.getSuggestion({
keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
//region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
success: (res) => {//搜索成功后的回调
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果，放到sug数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
this.suggestion = sug
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
});
},
backfillBtn(e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.suggestion.length; i++) {
if (i == id) {
this.backfill = this.suggestion[i].title
}
}
},
// 地点搜索
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', //搜索关键词
location: '39.980014,116.313972', //设置周边搜索中心点
success: (res) => {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果，放到mks数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/static/location.png", //图标路径
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {
console.log(res);
},
complete: (res) => {
console.log(res);
}
});
},
},
onHide() {
console.log('页面隐藏了')
},
}
</script>
预览效果如图下：
image
<script>
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: '',
markers: [],
poi: {
latitude: 39.984060,
longitude: 16.307520
},
}
},
onLoad() {
console.log('页面加载了') // 实例化API核心类
qqmapsdk = new QQMapWX({ // key: '申请的key'
key: ''
});
},
onShow() {
console.log('页面显示了')
},
onReady() {
console.log('页面初次渲染完成了')
},
methods: {
formSubmit(e) {
qqmapsdk.reverseGeocoder({
location: e.detail.value.reverseGeo || '',
//获取表单传入的位置坐标,不填默认当前位置,示例为string格式
//get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
success: (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: '/static/location.png', //图标路径
width: 20,
height: 20,
callout: { //在markers上展示地址名称，根据需求是否需要
content: res.address,
color: '#000',
display: 'ALWAYS'
}
});
this.markers = mks;
// this.poi = {
// latitude: res.location.lat,
// longitude: res.location.lng
// }
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
})
}
},
onHide() {
console.log('页面隐藏了')
},
}
</script>
geocoder – 提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
预览效果如图：
image
formSubmit(e) {
//调用地址解析接口
qqmapsdk.geocoder({
//获取表单传入地址 e.detail.value.geocoder
address: e.detail.value, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
success: (res)=> {//成功后的回调
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
//根据地址解析在地图上标记解析地址位置
this.markers = [{
id: 0,
title: res.title,
latitude: latitude,
longitude: longitude,
iconPath: '/static/location.png',//图标路径
width: 20,
height: 20,
callout: { //可根据需求是否展示经纬度
content: latitude + ',' + longitude,
color: '#000',
display: 'ALWAYS'
}
}],
this.poi= { //根据自己data数据设置相应的地图中心坐标变量名称
latitude: Number(latitude),
longitude: Number(longitude),
}
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
})
}
预览效果图如下：
image
formSubmit(e){
//调用距离计算接口
console.log(this.start,'dadaqianduan')
qqmapsdk.calculateDistance({
//mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
//from参数不填默认当前地址
//获取表单提交的经纬度并设置from和to参数（示例为string格式）
// from: e.detail.value.start || '', //若起点有数据则采用起点坐标，若为空默认当前地址
from: this.start || '',
to: this.end,
// to: e.detail.value.dest, //终点坐标
success: (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.distance=dis
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
});
}
},
调用获取城市列表接口，效果图如下：
image
onShow() {
console.log('页面显示了')
//调用获取城市列表接口
qqmapsdk.getCityList({
success: (res) => { //成功后的回调
console.log(res);
console.log('省份数据：', res.result[0]); //打印省份数据
this.a = res.result[0]
console.log('城市数据：', res.result[1]); //打印城市数据
this.b = res.result[1]
console.log('区县数据：', res.result[2]); //打印区县数据
this.c = res.result[2]
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
获取城市区县，效果图如下：
image
onShow() {
console.log('页面显示了')
//调用获取城市列表接口
qqmapsdk.getCityList({
success: (res) => { //成功后的回调
console.log(res);
console.log('省份数据：', res.result[0])
var city = res.result[0];
//根据对应接口getCityList返回数据的Id获取区县数据（以北京为例）
qqmapsdk.getDistrictByCityId({
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
id: city[0].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
success: (res) => { //成功后的回调
console.log(res);
console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！
image
image
image
