vue项目高德地图：循环显示marker点，自定义点图标，点击marker事件

奚大野...

已于 2023-03-10 09:44:16 修改

阅读量2.9k

点赞数

分类专栏：高德地图文章标签： vue.js

于 2022-11-30 14:46:02 首次发布

本文链接：https://blog.csdn.net/qq_41752378/article/details/128114553

版权

高德地图专栏收录该内容

11 篇文章 1 订阅

订阅专栏

var map = new AMap.Map('videoMap', {
    zoom: 17,
    pitch: 25,
    viewMode: '3D',
    resizeEnable: true,
    layers: [new AMap.TileLayer.Satellite()],   //地图层
  })
	
  //设备数据
  let ddc = marker1.ddc;

  //设备图标
  let ddcImgsrc = require('@/assets/gif/12.gif');
	
  //遍历显示marke
  ddc.forEach(item=>{
    if(!item.lng || !item.lat){return};
    let marker = new AMap.Marker({
      map:map,
      position:[item.lng,item.lat],
      content: `<div><img class="imgRotate" src="${ddcImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
	  offset: new AMap.Pixel(-15, -15),  //此处应设为图标尺寸的一半
      title:`${item.address}`  //鼠标滑过设备显示的文本
   });
   //给marker对象添加一个属性
   marker.setExtData(item);
   marker.on('click', _this.markerClick);	
   //给marker设置一个label
   marker.setLabel({
	  offset:new AMap.Pixel(0,0);
	  content:`<div class="infoInit">${item.name}</div>`,
	  direction:'buttom'  //显示的位置
   })
});
  	
 

  //设置地图层级与中心点  【针对有固定的重心点】
  map.setCenter([lng,lat]); 

  //自动设置中心点	【自动将所有的marker点显示到视觉页面内】
  // 第一个参数为空，表明用图上所有覆盖物 setFitview
  // 第二个参数为false, 非立即执行
  // 第三个参数设置上左下右的空白
  map.setFitView(null,false,[100,60,100,60]);