vue3 使用高德地图封装的获取经纬度的功能

 1.首先自己去平台申请key和密钥。

2.本代码封装的是一个对话框，替换为自己的key和密钥即可使用。

3.使用流程：

输入关键字，会出现搜索结果列表，

点击某一搜索结果，会定位至当前位置，

然后用鼠标可以精确定位，

精确定位后，点击保存，会在后台打印相关经纬度。

注：感觉代码并不完善，请您自己升级开发。 

    高德地图api使用有次数限制，调用过多会发短信提示。

<template>
	<el-dialog v-model="dialogVisible" title="获取经纬度" width="50%" :close-on-click-modal="false">
		<div class="home">
			<div id="map-box"></div>
			<div class="info-box">
				<input v-model="keyword" @change="handleSearch" placeholder="输入关键字搜索" />

				<el-tooltip content="点击复制">
					<span style="margin: 5px 8px">
						经纬度：<span class="copy" style="cursor: pointer" :data-clipboard-text="coord">{{ coord }}</span>
					</span>
				</el-tooltip>
				<div class="list" id="list"></div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="onSubmit">保存</el-button>
				<el-button @click="dialogVisible = false"> 取消 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { shallowRef, ref, onBeforeUnmount } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import ClipboardJS from 'clipboard';
import { ElSelect, ElOption, ElTooltip } from 'element-plus';

const clipboard = new ClipboardJS('.copy');
const dialogVisible = ref(false);
clipboard.on('success', function (e) {
	console.log(e);
	console.info('Text:', e.text);
	// this.$message.info('复制成功');
	e.clearSelection();
});

clipboard.on('error', function (e) {
	if (!e.text) {
		// this.$message.error('暂无可复制的内容');
	}
});

onBeforeUnmount(() => {
	clipboard.destroy();
});

interface AMapObj {
	Map: any;
	Marker: any;
}

const map = shallowRef(null);
const keyword = ref('');
const data = ref([]);
const coord = ref('');
let AMapObj: AMapObj, placeSearch: any, marker: any, geocoder: any;
window._AMapSecurityConfig = {
	securityJsCode: '您的密钥',
};
const initMap = () => {
	AMapLoader.load({
		key: '您的key', // 设置您的key
		version: '2.0',
		plugins: ['AMap.ToolBar', 'AMap.Driving'],
		AMapUI: {
			version: '1.1',
			plugins: [],
		},
		Loca: {
			version: '2.0.0',
		},
	})
		.then((AMap: AMapObj) => {
			// console.log(AMap);
			AMapObj = AMap;
			map.value = new AMap.Map('map-box', {
				viewMode: '2D',
				zoom: 10,
				zooms: [2, 22],
				center: [111.3, 37.5],
			});
			map.value.on('click', onMapClick);
			AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.AutoComplete'], () => {
				// 缩放条
				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({
					city: '全国',
					pageSize: 3, // 单页显示结果条数
					pageIndex: 1, // 页码
					citylimit: false, // 是否强制限制在设置的城市内搜索
					autoFitView: true,
					panel: 'list',
					map: map.value,
				});
			});
		})
		.catch((e) => {
			console.log(e);
		});
};

// 搜索地图
const handleSearch = () => {
	placeSearch.search(keyword.value);
};
// 点击地图
const onMapClick = (e: any) => {
	coord.value = e.lnglat.lng + ',' + e.lnglat.lat;
	geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function (status: string, result: any) {
		if (status === 'complete' && result.info === 'OK') {
			// result为对应的地理位置详细信息
			keyword.value = result.regeocode.formattedAddress;
		}
	});
	drawMarker(e.lnglat);
};
// 点击搜索项
const handleSelect = (item: any) => {
	console.log(item);
	drawMarker(item.location);
	if (item.location != null) {
		coord.value = item.location.lng + ',' + item.location.lat;
	}
};
// 绘制地点marker
const drawMarker = (location: any) => {
	if (location == null) return;
	let longitude = location.lng,
		latitude = location.lat;
	if (marker) {
		marker.setMap(null);
	}
	marker = new AMapObj.Marker({
		position: new AMapObj.LngLat(longitude, latitude),
		anchor: 'bottom-center',
	});
	marker.on('click', () => {
		coord.value = location;
	});
	map.value.add(marker);
	map.value.setZoomAndCenter(16, [longitude, latitude]);
};
const show = () => {
	dialogVisible.value = true;
};
const onSubmit = () => {
	console.log(coord.value);
};
defineExpose({
	show,
});
nextTick(() => {
	initMap();
});
</script>

<style  scoped>
.home {
	height: 450px;
	width: 100%;
	padding: 0px;
	margin: 0px;
	position: relative;
}
.info-box {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 300px;
	background-color: #1f1f1f;
	color: white;
	display: flex;
	flex-direction: column;
}
#map-box {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.search-dropdown {
	max-height: 200px !important;
}
/deep/ .amap-logo {
	display: none !important;
}
/deep/ .amap-copyright {
	display: none !important;
}
</style>