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({ })

你可能感兴趣的:(vue2,高德,vue.js,前端,javascript)