创建marker封装

  1. export default {
  2.   data(){
  3.     markerList:[],//marker数组 方便后续循环等操作  
  4.   },
  5.   methods:{
  6.     /* 初始化marker */
  7.     initMarker(){
  8.       for (let i = 0; i < data.length; i++) {           
  9.         let marker = this.createlcMaker(
  10.           data[i],
  11.           this.handlerClick.bind(this,data[i]),
  12.           this.labelHover.bind(this,data[i]),
  13.           this.labelMouseover.bind(this,data[i])
  14.         )
  15.         this.markerList.push(marker)
  16.       }
  17.     },
  18.     /* 封装创建marker */
  19.     createMarker(data,clickHandler,hoverHandler, mouseoutHandler){
  20.       var content = `<div class="way_point"></div>`;
  21.       var point = new AMap.LngLat(data.longitude, data.latitude);
  22.       var myIcon = new AMap.Icon({
  23.         image:"images/monitor/static/img/way_point.png",
  24.         size: new AMap.Size(64, 64),// 图标尺寸
  25.       });
  26.       var marker = new AMap.Marker({
  27.         position:point,
  28.         map: this.map,
  29.         content:content,
  30.         offset: new AMap.Pixel(-17, -42),// 相对于基点的偏移位置
  31.         extData:{data:data,type:'lcd'},//自定义数据
  32.       });
  33.       marker["layerType"] = '路测点';
  34.       if(clickHandler){
  35.         marker.on('click', clickHandler);
  36.       }
  37.       if(hoverHandler){
  38.         marker.on('mouseover', hoverHandler);
  39.       }
  40.       if (mouseoutHandler) {
  41.         marker.on('mouseout', mouseoutHandler);
  42.       }
  43.       // this.map.add(marker); //marker中map字段写了可以忽略此处
  44.       return marker;
  45.     }，
  46.   }
  47. }
  1. /* 点击事件 */
  2. handlerClick(data){
  3.     this.map.setCenter([data.longitude, data.latitude]);
  4.     var allOverlay = this.map.getAllOverlays();
  5.     for (let i = 0; i < allOverlay.length; i++) {
  6.         if (allOverlay[i]["layerType"] == '路测点') {
  7.             allOverlay[i].hide();
  8.             setTimeout(()=>{
  9.                 allOverlay[i].show();
  10.             },2000)
  11.         }
  12.     }
  13. },
  14. /* 鼠标悬浮创建内容提示框 */
  15. labelHover(data,e){
  16.     let content = `<div> data.rspName</div>`;
  17.     this.currentTip = new AMap.Marker({
  18.          map: this.map,
  19.          content: content,  // 自定义点标记覆盖物内容
  20.          position:  [Number(data.longitude), Number(data.latitude)], // 基点位置
  21.          offset: new AMap.Pixel(80, 0),// 相对于基点的偏移位置
  22.              anchor: 'center',
  23.     });
  24.     this.currentTip.setMap(this.map);
  25. },
  26. //鼠标移出删除内容提示框
  27. labelMouseover(data){
  28.     if (this.currentTip) {
  29.        //this.currentTip.hide();
  30.        this.map.remove(this.currentTip)
  31.     }
  32.     this.currentTip = null;
  33. },