主要实现功能：
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><mapid="ofoMap"longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}"covers="{{covers}}" show-locationclass="{{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包下载地址：/qqmap_wx_jssdk/index.html
获取当前位置：
onLoad: function () {qqmapsdk = new QQMapWX({key: 'CLTBZ-3GVWD-LZY4D-HCY2K-RK3EE-UDBWF' //这里自己的key秘钥进行填充});var that = thiswx.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.latitudevar longitude = res.longitudevar speed = res.speedvar 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.provincelet city = res.result.ad_info.citylet district = res.result.ad_info.districtvm.setData({province: province,//省city: city,//市district: district,//区})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}
实现大头针移动选点
bindregionchange: function (e) {var that = thisif (e.type == "begin") {console.log("begin");} else if (e.type == "end") {var mapCtx = wx.createMapContext("ofoMap")mapCtx.getCenterLocation({success: function (res) {var latitude = res.latitudevar longitude = res.longitudethat.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.latitudevar longitude = res.longitudethat.getLocal(latitude, longitude)}}) },
ok，以上就是实现功能的核心代码块了
关于搜索关键字功能的实现，我会在下个博客中给出
