1.MpVue小程序里面使用map组件
以前接触的地图功能也是比较少的，最近也是在学习使用微信小程序自带的map组件，结合腾讯平台的sdk进行地址的搜索和经纬度的逆向解析，自己在网上也是搜索了很多的资料，但是都是比较的高端还有晦涩难懂，自己总结了一下，尽量用一种简单易懂的方法使大家明白并且可以应用在实际的项目中
1.1 腾讯地图注册
1.1.1 点击网址找到微信小程序的JavaScriptSDK
1.1.2 申请开发者秘钥(key)
1.1.3 写key值的用途
1.1.4 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
把下载的东西解压出来
2 在MpVue项目中引用Map地图组件
2.1 在vue的页面中使用map组件
2.2 书写地图组件所需要的配置
2.2.1 markers标记点
markers是在地图上面进行显示的标记点,是一个数组，里面是用经纬度组成的对象
markers: [{
iconPath: "/resources/others.png",//显示的图标
id: 0,
latitude: 23.099994,//经度
longitude: 113.324520,//维度
width: 50,
height: 50
}],
2.3 然后就会显示下图的界面
样式的话，自己去调一下就可以了
3. 在Mpvue中使用SDK进行地址的逆向解析
3.1 首先是把下载的SDK文件放在我们的static文件下面
3.2 在需要的文件中进行引用
import QQMapWX from "../../../static/map/qqmap-wx-jssdk";//地址取决于你放在了什么位置
//然后在初始化加载页面的时候，去创建一个qqmapsdk的实例
onLoad() {
this.qqmapsdk = new QQMapWX({
key: "XXXXXXXXX"//申请的key值
});
},
3.3 微信授权获取地理位置信息
//methods里面
methods:{
//wx.getLocation()获取所在的位置信息
geo() {
let _this = this;
wx.getLocation({
type: "wgs84",
success: function(res) {
const {
latitude, longitude, speed, accuracy } = res;
_this.latitude = latitude;
_this.longitude = longitude;
//在这里可以使用qqmap对数据进行地址的逆向解析
_this.getLocal(latitude, longitude);
}
});
},
//但是首次加载的时候要去判断是否已经授权，如果没有的话弹出授权界面，此方法可以直接复制应用到自己的项目中
getUserLocation: function() {
var _this = this;
wx.getSetting({
success: res => {
if (
res.authSetting["scope.userLocation"] != undefined &&
res.authSetting["scope.userLocation"] != true
) {
wx.showModal({
title: "请求授权当前位置",
content: "需要获取您的地理位置，请确认授权",
success: function(res) {
if (res.cancel) {
//取消授权
wx.showToast({
title: "拒绝授权",
icon: "none",
duration: 1000
});
} else if (res.confirm) {
//确定授权，通过wx.openSetting发起授权请求
wx.openSetting({
success: function(res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: "授权成功",
icon: "success",
duration: 1000
});
//再次授权，调用wx.getLocation的API
_this.geo();
} else {
wx.showToast({
title: "授权失败",
icon: "none",
duration: 1000
});
}
}
});
}
}
});
} else if (res.authSetting["scope.userLocation"] == undefined) {
_this.geo();
} else {
//调用wx.getLocation的API
_this.geo();
}
}
});
},
//调用qqmap提供的api对数据进行解析
getSearchList() {
let that = this;
this.qqmapsdk.search({
keyword: this.keyWord,
success: function(res) {
console.log(res);
let arr = [];
res.data.forEach(item => {
arr.push({
iconPath: require("../../../static/images/address4.jpg"),
id: item.id,
latitude: item.location.lat,
longitude: item.location.lng,
width: 40,
height: 40
});
});
that.markers = arr;
}
});
},
}
4.QQMapSDK提供的api方法
希望对大家在开发的过程中，给大家提供一定的帮助，如果哪些方面有疏漏的话，希望大家在下面评论出来，谢谢大家的支持