vue高德地图添加标记点，点击Marker图标放大其余保持原状

Lora_0925

已于 2022-12-27 14:44:46 修改

阅读量3.3k

点赞数 2

分类专栏： vue2 高德文章标签： vue.js 前端 javascript

于 2022-12-27 14:42:07 首次发布

本文链接：https://blog.csdn.net/Lora_0925/article/details/128455336

版权

vue2 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

高德

1 篇文章 0 订阅

订阅专栏

需求：地图添加编辑点，被点击的点放大，其余点不变。

官网教程：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({ })