以uniapp为例 首先安装sdk包 有两种方法 1、npm安装 npm install qqmap-wx-jssdk --save 2、去官网下载一个js文件SDK包
//引用
var QQMapWX = require('qqmap-wx-jssdk')
var qqmapsdk = new QQMapWX({
//这个是key去官网注册获取key
key: 'xxxxxxxxxxxxxxxxxxxxxxxx'
})
//html
<map style="width: 100%; min-height: 100vh;" :scale = 'scale' :latitude="latitude" :longitude="longitude" :markers="markers" show-compass="true" enable-3D="true"></map>
data(){
return{
latitude: 23.0516513,
longitude: 113.3903287,
scale: 15,
markers:[]
}
}
//然后自己封装了一个函数
methods:{
nearby_search(key) {
var that = this;
//var xmwzB_index = that.xmwzB_index;
//var list_c = that.arrlist[that.xmwzB_index];
// 判断是否请求过了,如果没请求过则请求;请求过了就直接赋值
//if(list_c.length){
// that.arrlist_cur = list_c
//}else{
wx.showToast({
title: '请稍后',
icon: 'loading',
duration: 2000
})
qqmapsdk.search({
keyword: key, // 搜索关键词
page_size: 5, // 一页展示几个
location: that.latitude + ',' + that.longitude, //设置周边搜索中心点
success: function (res) { //搜索成功后的回调
wx.hideToast({});
var arrlist = [];
// 对获取的信息进行处理,整理出需要的字段
// 有些可能会涉及位置跳转(需要经纬度);展示位置名(详细参数设置参考官网说明)
arrlist.push({
latitude: that.latitude,
longitude: that.longitude,
// 标记图片 iconPath: '',
})
for (var i = 0; i < res.data.length; i++) {
arrlist.push({ // 获取返回结果,放到mks数组中
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
distance: res.data[i]._distance,//距离
iconPath: "",//标记图标// 标记图片
callout: {
content:res.data[i].title,
color: '#999',
fontSize: 14,
borderWidth: 2,
borderRadius: 10,
bgColor: '#fff',
padding: 5,
display: 'BYCLICK',
textAlign: 'center'
},
})
}
// 每次不用重新赋值,通过下标给需要的赋值
//var arrlist_key = 'arrlist['+xmwzB_index+']';
//that.arrlist_cur = arrlist
//这个是渲染标记的图标
that.markers = arrlist
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
//console.log(res.data);
}
});
//}
},
}
祝大家工作顺利 不喜勿喷