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

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

GitHub 加速计划 / vu / vue
109
18
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐