vue高德地图添加标记点,点击Marker图标放大其余保持原状
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
需求:地图添加编辑点,被点击的点放大,其余点不变。
官网教程: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({ })
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)