vue3高德地图+搜索+点击获取经纬度

首先 安装依赖

npm i @amap/amap-jsapi-loader --save

html（设置一个容器）点击位置控制台可以打印到数据 如果想要回显到input 只需在input内绑定v-modal即可

<template>
	<div>
		<input style="width: 80%; height: 30px" v-model="mapData.keyword" @keydown.enter="search" />
		<button @click="search">搜索</button>
		<div id="container" class="map" style="height: 400px; border-radius: 5px"></div>
	</div>
</template>

script

<script setup>
//引入
	import {onMounted,ref,reactive} from 'vue';
	import AMapLoader from '@amap/amap-jsapi-loader';

	const map = ref(null);
	const mapData = reactive({
		map: {},
		keyword: '',
		selectedLocation: {},
		selectedAddress: '',
	});
	onMounted(() => {
		window._AMapSecurityConfig = {
			securityJsCode: '', // 密钥
		};

		AMapLoader.load({
				key: '',//key值
				version: '1.4.15',
				plugins: ['AMap.PlaceSearch'],
			})
			.then((AMap) => {
				const mapInstance = new AMap.Map('container', {
					viewMode: '2D',
					zoom: 11,
					center: [113.984358, 35.288668],
					layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
				});

				mapInstance.on('click', (e) => {
                  //点击位置获取经纬度
					const lng = e.lnglat.getLng();
					const lat = e.lnglat.getLat();
					// 触发父组件传递的回调函数
					// this.$emit('map-click', lng, lat);
					console.log(lng, lat);
				});

				mapData.map = mapInstance;
			})
			.catch((e) => {
				console.log(e);
			});
	});
	const search = () => {
		console.log(mapData.keyword);
		if (mapData.keyword) {
			AMapLoader.load({
					key: '',//key值
					version: '1.4.15',
					plugins: ['AMap.PlaceSearch'],
				})
				.then((AMap) => {
					const placeSearch = new AMap.PlaceSearch({
						city: '',
						map: mapData.map,
					});
					console.log(mapData.keyword);
					placeSearch.search(mapData.keyword, (status, result) => {
						console.log(status, result.info);
						if (status === 'complete' && result.info === 'OK') {
							const pois = result.poiList.pois;
							if (pois.length > 0) {
								const {
									location
								} = pois[0];
								mapData.map.setCenter(location);
							}
						} else {
							console.log('搜索失败或无结果');
						}
					});
				})
				.catch((e) => {
					console.log(e);
				});
		}
	};
</script>

style

<style scoped>
	.map {
		width: 100%;
	}
</style>

效果：

如果想要更改地图的图层颜色 就把这个layers更改为以下：

layers: [
                    new AMap.TileLayer.RoadNet(),
                    new AMap.TileLayer.WMS({
                        url: 'https://ahocevar.com/geoserver/wms', // wms服务的url地址
                        blend: false, // 地图级别切换时，不同级别的图片是否进行混合
                        tileSize: 512, // 加载WMS图层服务时，图片的分片大小
                        params: {
                            'LAYERS': 'topp:states',
                            VERSION: '1.3.0'
                        } // OGC标准的WMS地图服务的GetMap接口的参数
                    })
                ],

效果