現在客戶來了一個項目簡況：有一個業務場景是添加門店的地址和經緯度，地址可以輸入，參考用經緯度當然不行，目前有最好方式就是讓用戶在地圖上搜索或者直接點擊獲取點的經緯度等詳細信息?，F在我們就看具體的內容。

　　登錄高德開放平臺

　　創建應用，添加Key，選擇Web端(JS API)，生成Key和安全密鑰

　　引入地圖 JSAPI

　　項目中使用了官方推薦的 JSAPILoader 來加載地圖

　　安裝官方 npm 包@amap/amap-jsapi-loader

　　配置安全密鑰（不安全的方式），并不包括其他方式

　　<script setup>
　　import AMapLoader from '@amap/amap-jsapi-loader';
　　window._AMapSecurityConfig = {
　　securityJsCode: '你申請的安全密鑰',
　　};
　　</script>

　　初始化地圖

　　創建一個id為mapContainer的div元素

　　調用initMap方法初始化相關地圖插件

　　<script setup>
　　const map = shallowRef(null);
　　let AMapObj;
　　function initMap() {
　　AMapLoader.load({
　　key: '你申請的Key',
　　version: '2.0',
　　}).then(AMap => {
　　AMapObj = AMap;
　　map.value = new AMap.Map('mapContainer');
　　})
　　}
　　</script>

　　地圖選點

　　現在我們有兩種選點方法：搜索選點和直接點擊。

　　搜索選點：使用 element-plus 的 autocomplete 組件結合地圖搜索服務實現下拉選擇地點

　　點擊選點：借助地圖點擊事件獲取地點的經緯度信息，然后使用地圖逆地理編碼api解析出地址信息 選擇地點之后同步繪制 marker 標記，同時將 marker 移動到地圖中心點并設置縮放比例

　　組件化使用

　　我們先要將上流程全部封裝到一個組件中，這樣才可以方便一整套邏輯的復用，通過 v-model 綁定所選地點的詳細信息，方便選擇地點之后將信息同步到父組件。

　　下面貼出組件全部的代碼　

　　<template>
　　<div class="map-wrapper">
　　<div id="mapcontainer"></div>
　　<div class="search-box">
　　<el-autocomplete
　　v-model="keyword"
　　:fetch-suggestions="handleSearch"
　　:trigger-on-focus="false"
　　clearable
　　placeholder="輸入城市+關鍵字搜索"
　　@select="handleSelect"
　　style="width: 300px"
　　/>
　　<el-input
　　v-model="location.longitude"
　　placeholder="點擊地圖選擇經度"
　　maxlength="15"
　　readonly
　　style="width: 150px; margin: 0 5px"
　　></el-input>
　　<el-input
　　v-model="location.latitude"
　　placeholder="點擊地圖選擇緯度"
　　maxlength="15"
　　readonly
　　style="width: 150px"
　　></el-input>
　　</div>
　　</div>
　　</template>
　　<script setup>
　　import AMapLoader from '@amap/amap-jsapi-loader';
　　window._AMapSecurityConfig = {
　　securityJsCode: '你申請的安全密鑰',
　　};
　　const props = defineProps({
　　modelValue: {
　　type: Object,
　　default() {
　　return {};
　　},
　　},
　　});
　　const emit = defineEmits(['update:modelValue']);
　　const map = shallowRef(null);
　　// 地點
　　const location = computed({
　　get() {
　　return props.modelValue;
　　},
　　set(val) {
　　emit('update:modelValue', val);
　　},
　　});
　　watch(location, (val) => {
　　if (val.longitude && val.latitude) {
　　drawMarker();
　　}
　　}
　　);
　　const keyword = ref('');
　　let placeSearch, AMapObj, marker, geocoder;
　　function initMap() {
　　AMapLoader.load({
　　key: '', // 申請好的Web端Key，首次調用 load 時必填
　　version: '2.0'
　　}).then(AMap => {
　　AMapObj = AMap;
　　map.value = new AMap.Map('mapcontainer');
　　// 添加點擊事件
　　map.value.on('click', onMapClick);
　　if (location.value.longitude) {
　　drawMarker();
　　}
　　AMap.plugin(
　　['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch', 'AMap.Geocoder'],
　　() => {
　　// 縮放條
　　const toolbar = new AMap.ToolBar();
　　// 比例尺
　　const scale = new AMap.Scale();
　　// 定位
　　const geolocation = new AMap.Geolocation({
　　enableHighAccuracy: true, //是否使用高精度定位，默認:true
　　timeout: 10000, //超過10秒后停止定位，默認：5s
　　position: 'RT', //定位按鈕的?？课恢?　　buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設置的?？课恢玫钠屏?，默認：Pixel(10, 20)
　　zoomToAccuracy: true, //定位成功后是否自動調整地圖視野到定位點
　　});
　　geocoder = new AMap.Geocoder({
　　city: '全國',
　　});
　　map.value.addControl(geolocation);
　　map.value.addControl(toolbar);
　　map.value.addControl(scale);
　　placeSearch = new AMap.PlaceSearch({
　　map: map.value,
　　city: '',
　　pageSize: 30, // 單頁顯示結果條數
　　pageIndex: 1, // 頁碼
　　citylimit: false, // 是否強制限制在設置的城市內搜索
　　autoFitView: true,
　　});
　　}
　　);
　　})
　　}
　　onMounted(() => {
　　initMap();
　　});
　　// 搜索地圖
　　function handleSearch(queryString, cb) {
　　placeSearch.search(queryString, (status, result) => {
　　if (result && typeof result === 'object' && result.poiList) {
　　const list = result.poiList.pois;
　　list.forEach(item => {
　　item.value = item.name;
　　item.label = item.name;
　　});
　　cb(list);
　　} else {cb([])}
　　});
　　}
　　// 點擊地圖
　　function onMapClick(e) {
　　const { lng, lat } = e.lnglat;
　　// 逆地理編碼
　　geocoder.getAddress([lng, lat], (status, result) => {
　　if (status === 'complete' && result.info === 'OK') {
　　const { addressComponent, formattedAddress } = result.regeocode;
　　let { city, province, district } = addressComponent;
　　if (!city) {
　　// 直轄市
　　city = province;
　　}
　　location.value = {
　　longitude: lng,
　　latitude: lat,
　　address: formattedAddress,
　　zone: [province, city, district],
　　};
　　}
　　});
　　}
　　// 點擊搜索項
　　function handleSelect(item) {
　　const { pname, cityname, adname, address, name } = item;
　　const { lng, lat } = item.location;
　　location.value = {
　　longitude: lng,
　　latitude: lat,
　　address,
　　zone: [pname, cityname, adname],
　　name,
　　};
　　map.value.setZoomAndCenter(16, [lng, lat]);
　　}
　　// 繪制地點marker
　　function drawMarker(val) {
　　const { longitude, latitude } = location.value || val;
　　if (marker) {
　　marker.setMap(null);
　　}
　　marker = new AMapObj.Marker({
　　position: new AMapObj.LngLat(longitude, latitude),
　　anchor: 'bottom-center',
　　});
　　map.value.add(marker);
　　map.value.setZoomAndCenter(16, [longitude, latitude]);
　　}
　　</script>
　　<style scoped>
　　.map-wrapper {
　　position: relative;
　　width: 100%;
　　height: 400px;
　　#mapcontainer {
　　width: 100%;
　　height: 100%;
　　}
　　.search-box {
　　position: absolute;
　　top: 10px;
　　left: 10px;
　　z-index: 1;
　　display: flex;
　　align-items: center;
　　}
　　}
　　</style>

　　加點料：當系統適配了暗黑模式，就通過監聽當前暗黑模式狀態，當然來動態切換地圖淺色主題和深色主題，從而實現地圖暗黑模式的適配，這就留給大家自行探索了。歡迎大家關注更多精彩內容。