微信小程序 使用map组件 地图获取位置 移动选点 逆地址解析

实现拖动地图，实现地图上选点，并解析地址

效果如下图：中心图片为目标位置。红色图标为视图发生变化时移动到中心点。

wxml文件：

<view><!--地图容器--><map id="myMap"markers="{{markers}}"style="width:100%;height:500px;"longitude="{{ cityInfo.lng }}"latitude="{{cityInfo.lat}}"scale='16'show-location="true"include-points="true"bindregionchange="regionChange"><cover-view class="center-img"><cover-image src="/images/tx-map-l1.png"></cover-image></cover-view></map><view class="item-title"><view>address:{{chooseAddress}}</view><view>recommend:{{chooseRecommend}}</view><view>chooseLat:{{chooseLat}}</view><view>chooseLng:{{chooseLng}}</view></view></view>

js文件

const app = getApp();// 引入SDK核心类var QQMapWX = require('../../../lib/qqmap-wx-jssdk');// 实例化API核心类var qqmapsdk = new QQMapWX({key: 'key' // 必填});Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取定位app.getCityInfo().then(cityInfo => {console.log('cityInfo==',cityInfo)this.setData({cityInfo},() => {console.log('onLoad===',this.data.cityInfo)});});},// 视野发生变化时触发regionChange(e) {let that = this;console.log('视野发生变化时触发===',that)that.mpCtx = wx.createMapContext("myMap");that.mpCtx.getScale({ //获取当前地图的缩放级别success:(res)=>{console.log('地图缩放级别',res.scale)that.mpCtx.getCenterLocation({//获取当前地图中心的经纬度。返回的是 gcj02 坐标系success:(res)=>{console.log(res)that.setData({markers:[{id:1,width:25,height:25,iconPath:'/images/tx-map-l2.png',longitude:res.longitude,latitude:res.latitude,title:res.address}]},()=>{qqmapsdk.reverseGeocoder({ //逆地址解析location:{latitude: res.latitude,longitude: res.longitude},success:(res1)=>{let res = res1.resultconsole.log('逆地址解析res===',res)that.setData({chooseLat: res.location.lat,chooseLng: res.location.lng,chooseAddress: res.address,chooseRecommend:res.formatted_addresses.recommend})}})})}})},fail: function() {console.log('获取当前地图的缩放级别失败===')}})}})

如果您喜欢编程，或者您需要网站开发、app、小程序等等。。可以加入我qq：752193915。