【vue2高德地图api】高德地图forEach批量添加marker点标记，点击获取item对象『全网最详细』

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Linux运维全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上运维知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024b （备注运维）

正文

看过我前几期，可以一键赋值拿走

initMap() {
  AMapLoader.load({
    key: this.mapJsKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '1.4.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    resizeEnable: true, // 定位到当前位置
    plugins: [
      'AMap.ToolBar', //工具条
      'AMap.Scale',
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      this.AMap = AMap;
      this.map = new AMap.Map('Map', {
        viewMode: '3D', //是否为3D地图模式
        zoom: 8, //初始化地图级别 // 3-18
      });
      this.map.addControl(new AMap.Scale()); // 比例尺
      this.map.addControl(new AMap.ToolBar()); // 工具条
      this.getList();
    })
    .catch((e) => {
      console.log(e);
    });
},

二、getList获取列表数据

getList方法
获取你的列表，赋值，然后再执行setMarks方法

三、写入marker标记在页面中

1、marker的官方文档

marker官方文档传送门

在文档中，高德地图api有提到一个参数

具体用法，看下面

2、setMarks方法

setMarks() {
  this.list.forEach((item, index) => {
    let marker = new this.AMap.Marker({
      // 经纬度对象，new AMap.LngLat(116.405467, 39.907761)
      // 也可以是经纬度构成的一维数组[116.39, 39.9]
      position: [item.longitude, item.latitude],
      title: 'aa',
      extData: { item }, // 写入你的item对象,必须要加{}
      label: '哈',
    });
    this.map.add(marker);
    marker.on('click', (e) => {
      let item = e.target.getExtData().item; // 获取item , 这个getExtData()是AMap.Marker的扩展方法
      console.log(item);
      console.log(e);
    });
  });
},

页面的点标记已经显示了

3 点击事件

点击后，打印的item和e

4 学习心得

在高德地图api教程中，的确有说明 用户自定义属性

extData参数用于 写入你自己想要的变量值，用于事件获取调用

let name='张三'
let marker = new this.AMap.Marker({
     position: [116.39, 39.9],
     extData: { name }, // 写入你的item对象
});

然后在监听marker点击事件中，

marker.on('click', (e) => {
	let name = e.target.getExtData().name;
	console.log(name); // name=张三
})

但是我翻了下高德地图的marker方法

• 它并没有相对应的案例
  
  所以这个 getExtData 到底怎么用，查遍了百度也不知道咋用

而且这个target里面的内容，如下图，不是专精高德地图api，所以压根看不懂。

5、补充：让所有marker点展示在地图内自动缩放

参考文章【VUE】web高德地图海量点标记,全部居中显示在屏幕中

方法
在forEach循环外面，获取经纬度数组。

let locationList = this.list.map((item) => {
  return {
    longitude: item.longitude,
    latitude: item.latitude,
  };
});
const sw = this.getSW(locationList); // 循环所有的点标记，返回最西南的一个经纬度
const ne = this.getNE(locationList); // 循环所有的点标记，返回最东北的一个经纬度
let mybounds = new this.AMap.Bounds(sw, ne); // sw, ne > [xxx,xxx], [xxx,xxx]
this.map.setBounds(mybounds);

• 获取东北角和西南角坐标方法，我把它封装了，挂载到main.js中，可以随时用
• 

/\*\*
 \* 坐标集合的最西南角
 \* @param {\*} list
 \* list 是接口获取的点 的数组
 \*/
export const getSW = (list) => {
  let south = null
  let west = null
  for (let item of list) {
    if ((west && item.longitude < west) || !west) {
      west = item.longitude - 0.7
    }
    if ((south && item.latitude < south) || !south) {
      south = item.latitude - 0.7
    }
  }
  return [west, south]
}

/\*\*
 \* 最东北角
 \* @param {\*} list
 \*/
export const getNE = (list) => {
  let north = null
  let east = null
  for (let item of list) {
    if ((east && item.longitude > east) || !east) {
      east = item.longitude + 0.7
    }
    if ((north && item.latitude > north) || !north) {
      north = item.latitude + 0.7
    }
  }
  return [east, north]
}


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注运维）**
![img](https://img-blog.csdnimg.cn/img_convert/58bd54a680415cf9913c016f0494600a.jpeg)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
 north]
}


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注运维）**
[外链图片转存中...(img-97ahCOs2-1713463160870)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**