vue 使用插件高德地图--vue-amap

 第一步：安装 vue-amap
查看 官网 获取高德地图实例 | @vuemap/vue-amap

npm install vue-amap

第二步：在你的 Vue 项目中注册 vue-amap：

// main.js
import Vue from 'vue';
import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
    // 高德开发者平台申请key值
    key: 'cc9c098d8c07c8fbaed05cc8cca2c71c',
    // plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar' ,'AMap.mapStyle', 'AMap.PolyEditor', 'AMap.CircleEditor'],
    // 默认高德 sdk 版本为 1.4.4
    // v: '2.0.0',
    // theme: 'blue',
    // mapStyle: 'amap://styles/dark', // 替换为你自己的样式ID
});

第三步：隐藏logo 在app.vue样式中

.amap-logo {

  display: none !important;

}

 第四步：在你的组件中使用地图点标记里面包含了点击事件

<template>
	<div class="mapClass">
		<el-amap class="amap-box" ref="map" :amap-manager="amapManager" :vid="'amap-vue'" :zoom="zoom" :plugin="plugin" :center="center" :events="events">
			<!-- 标记 -->
			<el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.title" :content="marker.content">
				<div @click.stop="showInfoWindows(marker)" class="marker-icon-container">
					<img style="width: 100%; height: 100%" src="../../static/1.jpg" alt="marker icon" />
					<view class="">
						{{ marker.content }}
					</view>
				</div>
			</el-amap-marker>
		</el-amap>
	</div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
	data() {
		return {
			zoom: 17,
			markers: [
				{ position: [121.349402, 31.228667], title: 'Marker 1', content: 'This1', icon: 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.png' },
				{ position: [121.329402, 31.228667], title: 'Marker 2', content: 'This2', icon: 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg' }
				// 添加更多的标记对象...
			],
			lng: 0,
			lat: 0,
			amapManager: new AMapManager(),
			loaded: true,
			center: [121.329402, 31.228667],
			events: {
				init: this.handleMapInit,
				moveend: this.handleMoveEnd,
				zoomchange: this.handleZoomChange,
				complete: this.handleMapComplete,
				click: this.handleClick
			},
			plugin: [
				// {
				// 	// 定位
				// 	pName: 'Geolocation',
				// 	events: {
				// 		init(o) {
				// 			// o是高德地图定位插件实例
				// 			o.getCurrentPosition((status, result) => {
				// 				if (result && result.position) {
				// 					// 设置经度
				// 					this.lng = result.position.lng;
				// 					// 设置维度
				// 					this.lat = result.position.lat;
				// 					// 设置坐标
				// 					this.center = [this.lng, this.lat];
				// 					this.markers.push([this.lng, this.lat]);
				// 					// load
				// 					this.loaded = true;
				// 					// 页面渲染好后
				// 					this.$nextTick();
				// 				}
				// 			});
				// 		}
				// 	}
				// }
				// {
				// 	// 工具栏
				// 	pName: 'ToolBar',
				// 	events: {
				// 		init(instance) {
				// 			// console.log(instance);
				// 		}
				// 	}
				// },
				// {
				// 	// 鹰眼
				// 	pName: 'OverView',
				// 	events: {
				// 		init(instance) {
				// 			// console.log(instance);
				// 		}
				// 	}
				// },
				// {
				// 	// 地图类型
				// 	pName: 'MapType',
				// 	defaultType: 0,
				// 	events: {
				// 		init(instance) {
				// 			// console.log(instance);
				// 		}
				// 	}
				// },
				// {
				// 	// 搜索
				// 	pName: 'PlaceSearch',
				// 	events: {
				// 		init(instance) {
				// 			// console.log(instance)
				// 		}
				// 	}
				// }
			]
		};
	},
	methods: {
		handleMapInit(o) {
			console.log(o.setMapStyle());
			// console.log(this.$refs.map.$$getInstance())
			o.getCity((result) => {
				console.log(result);
			});
			// o.setMapStyle('amap://styles/blue');
			lazyAMapApiLoaderInstance.load().then(() => {
				// self.initSearch();
			});
		},
		handleMoveEnd() {
			// 处理 moveend 事件
		},
		handleZoomChange() {
			// 处理 zoomchange 事件
		},
		handleMapComplete(o) {
			console.log(o);
			// 处理 complete 事件
		},
		handleClick(e) {
			// 处理 click 事件
			// ... 你的点击事件处理代码 ...
			console.log('e', e);
		},
		showInfoWindows(marker) {
			console.log('marker');
			// 在此处处理点击标记后的事件，例如显示信息窗口...
		}
		// 你可能还有其他的方法...
	}
};
</script>

<style scoped>
.mapClass {
	width: 400px;
	height: 400px;
	/* 根据您的需求设置地图容器的样式 */
}

.marker-icon-container {
	width: 40px;
	height: 40px;
	/* 根据您的需求设置标记图标容器的样式 */
}
</style>

展示形式