原文地址：https://blog.csdn.net/summer_ck/java/article/details/89456675
主要实现功能：
a.进入地图界面，会自动获取当前位置（用户需授权地理位置权限），并显示省市区在左上角，根据个人需求，我只显示了区
b.大头针实现，拖动地图，大头针都能获取到位置
c.左下角定位当前位置实现，当移动地图到别的位置，点击左下角图标，会回归到当前位置
下面是代码的实现
1. app.json文件中
"permission":{
"scope.userLocation":{
"desc":"授权当前位置"
}
}
效果图
弹出授权权限的框，让用户手动授权
2. map.wxml 布局文件
<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx; color: #b65151">当前：{{district}}</text>
<input placeholder="输入城市" class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}">
<!--绑定回填事件-->
<view >
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view class='item-title' bindtap="backfill" id="{{index}}">{{item.title}}</view>
<!--渲染详细地址-->
<view class='item-details'>{{item.addr}}</view>
</view>
</view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"
scale="{{scale}}"
covers="{{covers}}" show-location
class="{{showview?'map-c':'hidden'}}"
bindregionchange="bindregionchange"
controls="{{controls}}"
bindcontroltap='bindcontroltap'
>
</map>
</view>
可以根据自己的需求画布局，这里就不贴出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包下载地址：https://lbs.qq.com/qqmap_wx_jssdk/index.html
获取当前位置：
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，以上就是实现功能的核心代码块了
————————————————
版权声明：本文为CSDN博主「小c欧巴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/summer_ck/java/article/details/89456675
