1.實現(xiàn)效果

地圖拖拽.gif

2.如何使用騰訊地圖sdk

2.1申請開發(fā)者密鑰（key）

申請地址

• 創(chuàng)建應(yīng)用

在這里插入圖片描述

• 添加key，這個key值就是后面在程序中用到的key值

• 選擇WebSweviceApi,開啟這項，才能調(diào)逆地址解析接口

  
  
  在這里插入圖片描述
  
  
  在這里插入圖片描述

2.2 WebService API

使用文檔

騰訊地圖WebService API 是基于HTTPS/HTTP協(xié)議的數(shù)據(jù)接口，開發(fā)者可以使用任何客戶端、服務(wù)器和開發(fā)語言，按照騰訊地圖WebService API規(guī)范，按需構(gòu)建HTTPS請求，并獲取結(jié)果數(shù)據(jù)（目前支持JSON/JSONP方式返回）。

騰訊位置服務(wù)微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務(wù)工具包，可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計算等數(shù)據(jù)服務(wù)

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

1. 申請開發(fā)者密鑰（key）：申請密鑰
2. 開通webserviceAPI服務(wù)：控制臺 ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選WebServiceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)
3. 下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 | JavaScriptSDK v1.2
4. 安全域名設(shè)置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名”
   中設(shè)置request合法域名，添加 https://apis.map.qq.com

2.3 在小程序中使用

// 引入SDK核心類，js文件根據(jù)自己業(yè)務(wù)，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請的key'
        });
    },
    onShow: function () {
        // 調(diào)用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

3.結(jié)合小程序map，實現(xiàn)拖拽定位

map提供事件bindanchorpointtap：點擊定位標(biāo)時觸發(fā)，e.detail = {longitude, latitude}
視野改變時，regionchange 會觸發(fā)兩次，返回的 type 值分別為 begin 和 end。
2.8.0 起 begin 階段返回 causedBy，有效值為 gesture（手勢觸發(fā)） & update（接口觸發(fā)）
2.3.0 起 end 階段返回 causedBy，有效值為 drag（拖動導(dǎo)致）、scale（縮放導(dǎo)致）、update（調(diào)用更新接口導(dǎo)致）。

3.1 逆向解析拿到地址

• 用獲取到的longitude, latitude，調(diào)用騰訊地圖的接口，獲取到formatted_addresses.recommend，地址名稱。

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

3.2 設(shè)置一個拖拽結(jié)束的小動畫

• 拿到經(jīng)緯度之后，為小圖標(biāo)添加樣式動畫，地址解析完成的1s之后結(jié)束動畫。

@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 支持同層渲染 
  基礎(chǔ)庫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 組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用 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) {
    // 地圖發(fā)生變化的時候，獲取中間點，也就是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.完整代碼，關(guān)注公眾號 蘇蘇的bug，更多小程序demo，盡在蘇蘇的碼云如果對你有幫助，歡迎你的star+訂閱！