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>