微信小程序之地图
简介
腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!
操作:
-
申请开发者密钥(key):申请密钥
-
开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
-
小程序示例
1、地点搜索与地址解析
<map id="myMap"
markers="{{markers}}"
style="height:{{windowHeight}};width:100%;"
longitude="{{longitude}}"
latitude="{{latitude}}" scale='16'>
</map>
const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
key: '创建应用的key'
})
Page({
/**
* 页面的初始数据
*/
data: {
word:'维也纳国际酒店',
address:'地址',
markers:null,
latitude:'',
longitude:'',
windowHeight:''
},
formSubmit() {
var _this = this;
//调用地址解析接口
qqmapsdk.geocoder({
//获取表单传入地址
address: _this.data.address, //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号'
success: function(res) {//成功后的回调
var res = res.result;
let location = res.location.lat + ',' +res.location.lng
_this.setData({
latitude: res.location.lat,
longitude: res.location.lng,
})
_this.nearby_search(location)
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
},
nearby_search:function(location){
var _this = this;
// 调用接口
qqmapsdk.search({
keyword: _this.data.word, //搜索关键词
location: location, //设置周边搜索中心点
success: function (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: "../../img/mk.png", //图标路径
width: 20,
height: 20
})
}
_this.setData({ //设置markers属性,将搜索结果显示在地图中
markers: mks
})
},
fail: function (res) {
console.log(res);
},
complete: function (res){
console.log(res);
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.formSubmit()
var windowHeight = wx.getSystemInfoSync().windowHeight
this.setData({
windowHeight:(windowHeight-44)+'px'
})
},
})
2、关键词输入搜索提示
<van-sticky>
<view>
<van-search value="{{ backfill }}" shape="round" placeholder="请输入地址" use-action-slot bind:change="getsuggest" bind:search="onSearch">
<view slot="action" bind:tap="onClick">取消</view>
</van-search>
</view>
</van-sticky>
<view wx:for="{{suggestion}}" wx:key="index">
<view class="list-box" bindtap="backfill" data-title="{{item.title}}">
<view style="" id="{{index}}">{{item.title}}</view>
<view style="font-size:12px;color:#666;">{{item.addr}}</view>
</view>
</view>
const QQMapWX = require('../../../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
key: '创建应用的key'
})
//触发关键词输入提示事件
getsuggest: function(e) {
console.log(e);
var _this = this;
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: e.detail, //用户输入的关键词,可设置固定值,如keyword:'KFC'
//region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
success: function(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.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
},
3、逆地址解析
const QQMapWX = require('../../../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
key: '创建应用的key'
})
//先获取坐标值,然后再根据坐标值获取地址名称
getAddressLocation(){
let that = this
wx.getLocation({
type: 'gcj02',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
that.getAddress(latitude, longitude)
}
})
},
getAddress(latitude, longitude) {
qqmapsdk.reverseGeocoder({
location: {latitude,longitude},
success(res) {
that.setData({
oneTitle:res.result.ad_info.city + res.result.ad_info.district
})
}
})
},
tip
1、在开发测试的时候会发现获取的定位不准确,其实没事的!!!!!是电脑测试的问题,到了手机测试就会准确了的
2、坐标系最好采用gcj02坐标系,会准确
3、官网:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview