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

 第一步：安装 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
});

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

<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>