vue高德地图添加标记点,点击Marker图标放大其余保持原状
vue高德地图添加标记点,点击Marker图标放大其余保持原状
·
需求:地图添加编辑点,被点击的点放大,其余点不变。
官网教程:JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0 | 高德地图API
别忘记了设置地图安全密钥!
一、 地图初始化函数 initMap
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
zoom: 16,
mapStyle: "amap://styles/27531f8203a219e2fbc8838256a0ac28",
});
}).catch(e=>{
console.log(e);
})
},
},
二、获取标记点列表,添加标记点
mapList(obj)
.then((res) => {
this.markerList = [];// 用来装标记点
res.forEach((element, index) => {
//后端返回-标记点的经纬度
let lng = Number(element.longitude);
let lat = Number(element.latitude);
// 图标地址
let src=require(`@/assets/icon_dt_dw0.png`);
// 配置marker
let marker = new AMap.Marker({
position: [lng, lat],
icon: new AMap.Icon({
image: src,
imageSize: new AMap.Size(15, 21),
}),
offset: new AMap.Pixel(-20, -62),//设置偏移量
extData: {
index,
},
});
// 给marker添加点击事件
marker.on("click", (e) => {
//获取当前点击的标记值
let index = e.target.getExtData().index;
// 将所有标记点与当前编辑点匹配,相同则放大图标,
// 不同则设置为初始值(将其余被放大的标记点复原)
this.markerList.forEach((markeritem) => {
let index2 = markeritem.getExtData().index;
let icon = e.target.getIcon();
if (index === index2) {
// 相同-放大
e.target.setIcon(
new AMap.Icon({
image: icon.w.image, // Icon的图像
imageSize: new AMap.Size(20, 28),
})
);
} else {
// 不同-复原
markeritem.setIcon(
new AMap.Icon({
image: markeritem.getIcon().w.image, // Icon的图像
imageSize: new AMap.Size(15, 21),
})
);
}
});
});
this.markerList.push(marker);
});
// 将标记点数组放入Map
this.Map.add(this.markerList);
})
.catch((e) => {
console.log(e)
});
注意点:
1.设置offset: new AMap.Pixel(-20, -62)
2.设置imageSize: new AMap.Size(15, 21)
3.设置icon: new AMap.Icon({ })
更多推荐
已为社区贡献8条内容
所有评论(0)