微信小程序map+腾讯地图sdk实现拖拽定位，逆地址解析

1.实现效果

2.如何使用腾讯地图sdk

2.1申请开发者密钥（key）

申请地址

• 创建应用

• 添加key，这个key值就是后面在程序中用到的key值
• 选择WebSweviceApi,开启这项，才能调逆地址解析接口
  
  

2.2 WebService API

使用文档

腾讯地图WebService API 是基于HTTPS/HTTP协议的数据接口，开发者可以使用任何客户端、服务器和开发语言，按照腾讯地图WebService API规范，按需构建HTTPS请求，并获取结果数据（目前支持JSON/JSONP方式返回）。

腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务

逆地址解析：https://apis.map.qq.com/ws/geocoder/v1/?location=（get请求）

1. 申请开发者密钥（key）：申请密钥
2. 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 | JavaScriptSDK v1.2
4. 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名”
   中设置request合法域名，添加 https://apis.map.qq.com

2.3 在小程序中使用

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

3.结合小程序map，实现拖拽定位

map提供事件bindanchorpointtap：点击定位标时触发，e.detail = {longitude, latitude}
视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin 和 end。
2.8.0 起 begin 阶段返回 causedBy，有效值为 gesture（手势触发） & update（接口触发）
2.3.0 起 end 阶段返回 causedBy，有效值为 drag（拖动导致）、scale（缩放导致）、update（调用更新接口导致）。

3.1 逆向解析拿到地址

• 用获取到的longitude, latitude，调用腾讯地图的接口，获取到formatted_addresses.recommend，地址名称。

qqMapSdk.reverseGeocoder({
 location: {
     latitude: lat,
     longitude: lng
   },
   success: (res) => {
   },
   fail: (res) => {
   }
 })

3.2 设置一个拖拽结束的小动画

• 拿到经纬度之后，为小图标添加样式动画，地址解析完成的1s之后结束动画。

@keyframes awvae {
  40% {
    transform: scale(1.4);
  }

  70% {
    transform: scale(0.4);
  }

  100% {
    transform: scale(1);
  }
}

4.主要代码

<!--pages/jsCase/mapLocation/index.wxml-->
<view class="box">
  <!-- 从 2.8.0 起 map 支持同层渲染 
  基础库2.12.2 map新增罗盘-->
  <map id="maps" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location bindregionchange="regionchange">
    <cover-image class="cover-image {{show_ani}}" src="../img/map.png" />
  </map>
  <cover-view class="address_box">
    <cover-view class="adress flex-row">
      <cover-view class="b"></cover-view>
      <cover-view class="text_ellipsis">{{address}}</cover-view>
    </cover-view>
    <cover-view class="adress flex-row">
      <cover-view class="b d"></cover-view>
      <cover-view class="text_ellipsis"> {{longitude}},{{latitude}}</cover-view>
    </cover-view>
  </cover-view>
</view>

/* pages/jsCase/mapLocation/index.wxss */
page {
  height: 100%;
}

.box {
  height: 100%;
}

map {
  width: 100%;
  height: 100%;
}

.cover-image {
  height: 60rpx;
  width: 60rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -30rpx;
  margin-left: -30rpx;
}

.address_box {
  width: 710rpx;
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 18rpx;
  color: #555;
  font-size: 28rpx;
}

.adress {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eaeef1;
}

.adress:last-child {
  border-bottom: none;
}

.adress .b {
  height: 16rpx;
  width: 16rpx;
  border-radius: 8rpx;
  background: #5677fc;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.adress .d {
  background-color: orange;
}

.show {
  animation: awvae .7s ease-in-out;
}

@keyframes awvae {
  40% {
    transform: scale(1.4);
  }

  70% {
    transform: scale(0.4);
  }

  100% {
    transform: scale(1);
  }
}

import qqMapSdk from '../util/qqmap.js';
Page({

  data: {
    address: "正在获取地址...",
    longitude: '',
    latitude: '',
    show_ani: ""
  },

  onLoad: function (options) {
    this.getNowLocation()
  },
  getNowLocation() {
    // map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        this.getAddress(res.longitude, res.latitude);
      }
    })
  },
  regionchange(e) {
    // 地图发生变化的时候，获取中间点，也就是cover-image指定的位置
    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
      this.setData({
        address: "正在获取地址..."
      })
      this.map = wx.createMapContext("maps");
      this.map.getCenterLocation({
        type: 'gcj02',
        success: (res) => {
          this.setData({
            show_ani: "show",
            latitude: res.latitude,
            longitude: res.longitude
          })
          this.getAddress(res.longitude, res.latitude);
        }
      })
    }
  },
 ......
})

const QQMapWX = require('./qqmap-lib/qqmap-wx-jssdk.js');
const qqMapSdk = new QQMapWX({
    key: '你自己的key'
});
module.exports = qqMapSdk

5.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！