主要实现功能:
a.进入地图界面,会自动获取当前位置(用户需授权地理位置权限),并显示省市区在左上角,根据个人需求,我只显示了区
b.大头针实现,拖动地图,大头针都能获取到位置
c.左下角定位当前位置实现,当移动地图到别的位置,点击左下角图标,会回归到当前位置
下面是代码的实现
1. app.json文件中
"permission":{
"scope.userLocation":{
"desc":"授权当前位置"
}
}
弹出授权权限的框,让用户手动授权
2. map.wxml 布局文件
当前:{{district}}
{{item.title}}
{{item.addr}}
可以根据自己的需求画布局,这里就不贴出wxss样式文件了
3. map.js
const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
var qqmapsdk;
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '开发密钥(key)' // 必填
});
关于jar包,我这里用的是腾讯地图的,可以去官网下
jar包下载地址:微信小程序JavaScript SDK | 腾讯位置服务
获取当前位置:
onLoad: function () {
qqmapsdk = new QQMapWX({
key: 'CLTBZ-3GVWD-LZY4D-HCY2K-RK3EE-UDBWF' //这里自己的key秘钥进行填充
});
var that = this
wx.showLoading({
title: "定位中",
mask: true
})
wx.getSystemInfo({
success: (res) => {
this.setData({
controls: [
{
id: 1,
iconPath: '/images/marker.png', // 大头针图片
position: {
left: res.windowWidth / 2 - 11,
top: res.windowHeight / 2 - 70,
width: 26,
height: 45
},
clickable: true
},
{
id: 2,
iconPath: '/images/location.png', // 左下角定位图片
position: {
left: 20,
top: res.windowHeight - 100,
width: 40,
height: 40
},
clickable: true
},
]
})
}
})
wx.getLocation({
type: 'wgs84',
//定位成功,更新定位结果
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
//经纬度转化为地址
that.getLocal(latitude, longitude)
that.setData({
longitude: longitude,
latitude: latitude,
speed: speed,
accuracy: accuracy
})
},
//定位失败回调
fail: function () {
wx.showToast({
title: "定位失败",
icon: "none"
})
},
complete: function () {
//隐藏定位中信息进度
wx.hideLoading()
}
})
}
经纬度转换为地址:
getLocal: function (latitude, longitude) {
let vm = this;
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
console.log(JSON.stringify(res));
let province = res.result.ad_info.province
let city = res.result.ad_info.city
let district = res.result.ad_info.district
vm.setData({
province: province,//省
city: city,//市
district: district,//区
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
// console.log(res);
}
});
}
实现大头针移动选点
bindregionchange: function (e) {
var that = this
if (e.type == "begin") {
console.log("begin");
} else if (e.type == "end") {
var mapCtx = wx.createMapContext("ofoMap")
mapCtx.getCenterLocation({
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
that.getLocal(latitude, longitude)
}
})
}
}
点击icon回归当前位置
bindcontroltap: function (e) {
switch (e.controlId) {
// 当点击图标location.png的图标,则触发事件movetoPositioon()
case 2:
this.movetoPosition();
break;
}
}
移动定点
movetoPosition: function () {
this.mapCtx.moveToLocation();
},
onShow: function () {
var that=this;
console.log("onShow");
that.mapCtx = wx.createMapContext("ofoMap");
//this.movetoPosition();
that.mapCtx.getCenterLocation({
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
that.getLocal(latitude, longitude)
}
})
},
ok,以上就是实现功能的核心代码块了
关于搜索关键字功能的实现,我会在下个博客中给出