微信小程序 使用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.result
                    console.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。