elementui 绑定多个market点和label，修改icon、自定义extData、绑定事件
1.el-amap-marker 代码
<el-amap-marker v-for="(marker,index) in markers" :key ="'marker'+index" :events="markerEvents" :position ="marker.position" :label="marker.label" :icon="marker.icon" :extData="marker.extData" > </el-amap-marker>
2.初始化maker点
//初始化地图标记点 funcInitMap(){ //this.markers.push([pois[0].lng,pois[0].lat]) //label:{content:'钦汇园', offset:[10,12]}, let markerLabel={ label:{content:'钦汇园0', offset:[0,45]}, position:[114.397169,30.50576], icon:require("@/assets/img/green.png"), extData : {"projectId":"1"} }; let markerLabel1={ label:{content:'钦汇园1', offset:[0,45]}, position:[116.410703, 39.897555], icon:require("@/assets/img/red.png"), extData : {"projectId":"2"} }; let markerLabel2={ label:{content:'钦汇园2', offset:[0,45]}, position:[116.402292, 39.892353], icon:require("@/assets/img/oldPeople.png"), extData : {"projectId":"3"} }; let markerLabel3={ label:{content:'钦汇园3', offset:[0,45]}, position:[116.389846, 39.891365], icon:require("@/assets/img/green.png"), extData : {"projectId":"4"} }; this.markers.push(markerLabel); this.markers.push(markerLabel1); this.markers.push(markerLabel2); this.markers.push(markerLabel3); },
3.even事件
markerEvents:{ //点击事件 click(e) { //标签内容 const label = JSON.parse(JSON.stringify(e.target.Ce.label["content"])); //marker点唯一标识 const projectId =e.target.getExtData().projectId; self.open = true; self.title = label; console.log('label==',label); console.log('projectId==',projectId); } },
4.全部代码
<template>
<div id="app">
<!-- <h3 class="title">{{ msg }}</h3>-->
<div class="amap-wrapper">
<!-- <el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result ="onSearchResult"
>
<!– 搜索条件 是个对象 属性是city城市名，citylimit：false； 搜索回调函数 –>
</el-amap-search-box>-->
<el-amap
ref="map"
class="amap-box"
:vid="'amap-vue'"
:amap-manager="amapManager"
:center="center"
expandZoomRange="true"
:zoom="zoom"
:plugin="plugins"
:pitch="66"
>
<!--marker -->
<el-amap-marker
v-for="(marker,index) in markers"
:key ="'marker'+index"
:events="markerEvents"
:position ="marker.position"
:label="marker.label"
:icon="marker.icon"
:extData="marker.extData"
> </el-amap-marker>
</el-amap>
</div>
<!-- 编辑弹出框 -->
<el-dialog :title="title" :visible.sync="open" width="50%">
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" >确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
data () {
let self = this;
return {
//弹出窗属性
open: false,
// 弹出层标题
title: "",
//marker点集合
markers: [],
//mark点的label名称
label:{
content:
'钦汇园',
offset:[10,12]
},
markerEvents:{
//点击事件
click(e) {
//标签内容
const label = JSON.parse(JSON.stringify(e.target.Ce.label["content"]));
//marker点唯一标识
const projectId =e.target.getExtData().projectId;
self.open = true;
self.title = label;
console.log('label==',label);
console.log('projectId==',projectId);
}
},
//圆的半径
radius: 100,
//搜索
searchOption: {
city: "全国",
citylimit: false,
},
msg: 'vue-amap向你问好！',
center: [119.72899, 30.254775],
plugins: [
{
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 100, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
extensions: "all",
//地图定位按钮
pName: "Geolocation",
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
console.log(result);
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.loaded = true;
self.$nextTick();
}
});
},
},
{
//地图工具条
pName: "ToolBar",
init(o) {},
},
{
//左下角缩略图插件 比例尺
pName: "Scale",
init(o) {},
},
]
}
},
created() {
this.funcInitMap();
},
methods:{
//初始化地图标记点
funcInitMap(){
//this.markers.push([pois[0].lng,pois[0].lat])
//label:{content:'钦汇园', offset:[10,12]},
let markerLabel={
label:{content:'钦汇园0', offset:[0,45]},
position:[114.397169,30.50576],
icon:require("@/assets/img/green.png"),
extData : {"projectId":"1"}
};
let markerLabel1={
label:{content:'钦汇园1', offset:[0,45]},
position:[116.410703, 39.897555],
icon:require("@/assets/img/red.png"),
extData : {"projectId":"2"}
};
let markerLabel2={
label:{content:'钦汇园2', offset:[0,45]},
position:[116.402292, 39.892353],
icon:require("@/assets/img/oldPeople.png"),
extData : {"projectId":"3"}
};
let markerLabel3={
label:{content:'钦汇园3', offset:[0,45]},
position:[116.389846, 39.891365],
icon:require("@/assets/img/green.png"),
extData : {"projectId":"4"}
};
this.markers.push(markerLabel);
this.markers.push(markerLabel1);
this.markers.push(markerLabel2);
this.markers.push(markerLabel3);
},
//取消按钮
cancel() {
this.open = false;
},
//点击搜索后触发的事件
onSearchResult(pois){
console.log(pois)
this.input = document.querySelector('.search-box-wrapper input').value
this.center = [pois[0].lng,pois[0].lat] //选择了第一个值
this.markers = []; //标记点先清空
this.markers.push([pois[0].lng,pois[0].lat]) //把搜索的位置的第一个值存入标记中并显示标记点
console.log(this.markers);
}
}
}
</script>
<style>
.amap-wrapper {
height: 100%;
position: relative;
}
.search-box {
position: absolute !important;
top: 15px;
left: 70px;
z-index: 200 !important;
}
.amap-icon img {
max-width: 200rem !important;
max-height: 200rem !important;
}
</style>
5.效果图
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！