-
申请开发者密钥(key):申请密钥
-
开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
在app.js中设置permission
"pages": [
"pages/index/index",
"pages/index/reservationCenter",
"pages/index/cards",
"pages/me/index",
"pages/map/map",
"pages/images/index",
"pages/images/info",
"pages/index/card",
"pages/index/filmArticle",
"pages/index/directory",
"pages/index/consult",
"pages/index/local",
"pages/index/shop",
"pages/index/consultText",
"pages/index/shopDetail"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
在app.js中,
wx.getLocation({
type: 'wgs84',
success(res) {
wx.setStorageSync('lat_lon', res)
}
})
在地图页面map.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
//lat_lon是wx.getLocation返回的经纬度
data: {
latitude: wx.getStorageSync('lat_lon').latitude ? wx.getStorageSync('lat_lon').latitude : '36.066938',
longitude: wx.getStorageSync('lat_lon').longitude ? wx.getStorageSync('lat_lon').longitude : '120.382665',
tips: {},
tips_info: {},
tips_index: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
qqmapsdk = new QQMapWX({
key: ''
});
},
getsuggest: function (e) {
var _this = this;
if (e.detail.value == '') {
_this.setData({
tips: ''
});
return
}
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
sig: '',
//region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
success: function (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属性,将关键词搜索结果以列表形式展示
tips: sug
});
},
fail: function (error) {
console.error(error);
}
});
},
bindSearch: function (e) {
this.setData({
tips_index: e.currentTarget.dataset.index
})
},
sub_address() {
var _this = this;
wx.setStorageSync('tips', this.data.tips[this.data.tips_index])
console.log(this.data.tips[this.data.tips_index]);
let info = this.data.tips[this.data.tips_index]
//附近地址
qqmapsdk.search({
keyword: 'kfc', //搜索关键词
location: '39.980014,116.313972', //设置周边搜索中心点
sig: '',
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: "/resources/my_marker.png", //图标路径
width: 20,
height: 20
})
}
_this.setData({ //设置markers属性,将搜索结果显示在地图中
markers: mks
})
},
fail: function (res) {
console.log(res);
},
complete: function (res){
console.log(res);
}
});
// wx.navigateBack({
// delta: -1,
// })
}
})