前言
又到熟悉的前言，接到個需求，要引入高德地圖api，我就記錄一下，要是有幫助記得點贊、收藏、關注😁。
后續有時間會慢慢完善一些文章：（畫餅時間）
- map組件自定義氣泡、mark標記點
- 后臺管理系統如何引入高德地圖，靜態圖 + 搜索地址獲取經緯度
- 把這幾篇連在一起（小程序的大部分出完，就給大家編輯個快速通道，其余的大家就先自己點專欄了哈）
高德地圖入門指南：https://lbs.amap.com/api/wx/gettingstarted
一、準備工作
1. 申請地圖 API 密鑰
- 若使用 騰訊地圖（微信小程序原生支持）：
前往 騰訊位置服務控制臺 申請 API 密鑰（Key），并在微信小程序后臺配置「合法域名」（apis.map.qq.com 等）。 - 若使用 高德地圖：
前往 高德開放平臺 申請小程序 SDK 密鑰，并下載 高德微信小程序 SDK。
2. 高德地圖申請key
到高德開發平臺
官網直通道：https://lbs.amap.com/
3. 下載微信小程序SDK
我下載的時候是： AMapWX_SDK_V1.3.0
官網直通道：https://lbs.amap.com/api/wx/download
解壓后得到：amap-wx.js ，你可以按照你的習慣放文件，我是放到小程序的utils文件夾下：
4.配置小程序服務器域名
登錄微信公眾平臺，在 “設置”－>“開發設置” 中設置 request 合法域名，將 https://restapi.amap.com 中添加進去。
微信公眾平臺：https://mp.weixin.qq.com/
二、封裝自己的Map 組件
先確定自己的需求要求什么程度，再定義一下自己的組件。
map組件 官網通道：https://developers.weixin.qq.com/miniprogram/dev/component/map.html
這邊就按照我的需求來咯，再闡述一下吧：
1. 需求明確
在頁面上鍵入關鍵字，模糊查詢出相關的地址信息，用戶在下拉框內選擇詳細地址，則在地圖上標記出來。
2. 代碼實現
- map 組件封裝， 屬性的說明如圖：
官網直通車： https://developers.weixin.qq.com/miniprogram/dev/component/map.html
<mapid="map":longitude="center.longitude":latitude="center.latitude":markers="markers":scale="mapScale"@regionchange="onRegionChange"@markertap="onMarkerTap"show-location:layer-style="layerStyleId"class="map"></map>
- 引入sdk，申明變量
<script setup>
import { onMounted } from 'vue';
import amapFile from '../../utils/amap-wx.130.js'const mapScale = ref(5) // 初始縮放級別：全國視圖
const layerStyleId = ref('你的keys') //在高德上申請的keysearchMap = () => {let searchText = '鍵入的值'let myAmapFun = new amapFile.AMapWX({key: layerStyleId })let that = this//根據關鍵詞，給出相應的提示信息myAmapFun.getInputtips({ keywords: searchText,success: function (res) {console.log('success --- 這就是符合地址信息的多個地址了', res.tips[0].location)},fail: function (fail) {console.log('err', fail)}})}
</script>
官網接口文檔，快速通道：https://lbs.amap.com/api/wx/reference/core#t7
官網接口字段說明文檔：https://lbs.amap.com/api/webservice/guide/api-advanced/inputtips
POI分類列表，下載地址： https://lbs.amap.com/api/webservice/download
python爬蟲--selenium)
