Javascript 传单鼠标悬停在列表上打开弹出窗口_Javascript_Angular_Typescript_Popup_Leaflet

Javascript 传单鼠标悬停在列表上打开弹出窗口

javascript angular typescript leaflet

Javascript 传单鼠标悬停在列表上打开弹出窗口,javascript,angular,typescript,popup,leaflet,Javascript,Angular,Typescript,Popup,Leaflet,我的应用程序的一个视图是，一边是所有管脚的列表，另一边是带有实际管脚的地图我想弹出窗口打开，因为我通过我的鼠标悬停列表。假设我的鼠标在列表的#1上，我希望相应pin的弹出窗口打开这将从列表组件中删除html： <table class="table-striped"> <thead>  <th>Kunstwerkname</

我的应用程序的一个视图是，一边是所有管脚的列表，另一边是带有实际管脚的地图

我想弹出窗口打开，因为我通过我的鼠标悬停列表。假设我的鼠标在列表的#1上，我希望相应pin的弹出窗口打开

这将从列表组件中删除html：

    <table class="table-striped">
      <thead>
        <!-- <th>id</th> -->
        <th>Kunstwerkname</th>
        <th>Strasse</th>
        <th>PLZ</th>
        <th>
          <button class="button-list" (click)="addArtwork()">
            <img src="assets/icons/add.svg">
          </button>
        </th>
      </thead>
      <tbody>
        <tr *ngFor="let artwork of artworkList;" class="artworkList" (mouseover)="previewPopup(artwork)">
          <td>{{artwork.name}}</td>
          <td>{{artwork.streetname}}</td>
          <td>{{artwork.zipcode}}</td>
          <td>
            <button class="button-list" (click)="editArtwork(artwork)">
              <img src="assets/icons/edit.svg">
            </button>
            <button class="button-list" (click)="deleteArtwork(artwork)">
              <img src="assets/icons/delete.svg">
            </button>
          </td>
        </tr>
      </tbody>
    </table>

import { Artwork, ArtworkService } from './../_services/artwork.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-artwork-list',
  templateUrl: './artwork-list.component.html',
  styleUrls: ['./artwork-list.component.css']
})
export class ArtworkListComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  @Output() private preview = new EventEmitter<number>();
  artworkList: Artwork[];

  constructor(
    private artworkService: ArtworkService,
) { }

  ngOnInit() {
    this.refresh();
  }
  refresh() {
    this.artworkService.retrieveAll().then(
      artworkList => this.artworkList = artworkList
    );
  }

  addArtwork() {
    console.log('add artwork');
    this.add.emit();
  }

  editArtwork(artwork: Artwork) {
    console.log('edit artwork ' + artwork.name + ' ' + artwork.id );
    this.edit.emit(artwork.id);
  }

  deleteArtwork(artwork: Artwork) {
    console.log('delete artwork ' + artwork.name + ' ' + artwork.id );
    this.artworkService.delete(artwork.id).then(
      () => this.refresh()
    );
  }

  previewPopup(artwork: Artwork) {
    console.log("hovering mouse");
    console.log(artwork.id);
    this.preview.emit(artwork.id);
  }

}

import { Component, OnInit, Output, EventEmitter, ElementRef, Input } from '@angular/core';

/*When you include the leaflet script inside the Angular project, it gets
loaded and exported into a L variable.*/
declare let L; //this is the leaflet variable!

import { MapButtonsComponent } from './map-buttons/map-buttons';
import { Artwork, ArtworkService } from '../_services/artwork.service';
import { FilterMapComponent } from './filter-map/filter-map.component';



@Component({
  selector: 'app-open-street-map',
  templateUrl: './open-street-map.component.html',
  styleUrls: ['./open-street-map.component.css']
})
export class OpenStreetMapComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  artworkList: Artwork[];
  map;

  // markerIcon
  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [13, 16],
      iconUrl: 'assets/icons/marker.svg',
      shadowUrl: 'assets/icons/marker-shadow.png'
    })
  };

  constructor(
    private artworkService: ArtworkService,
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    this.map = L.map('map', {
      center: [48.208, 16.373],
      zoom: 13,
      zoomControl: false,
    });

    this.refresh();

    // base layer
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      minZoom: 13,
      id: 'mapbox.streets',
      accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
    }).addTo(this.map);

    MapButtonsComponent.renderZoom(this.map);
    MapButtonsComponent.renderCompass(this.map);
    MapButtonsComponent.renderLocation(this.map);
  }

  previewArtwork() {
   this.map.eachLayer(layer => {
  if (layer instanceof L.Marker) {
    this.map.removeLayer(layer);
  }
});
let previewedMarker = L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
  .addTo(this.map)
  .on('mouseover', () => {
    openPopup();
  });
}

  }
}


昆斯特沃克纳姆
斯特拉斯
请
{{artwork.name}
{{artwork.streetname}}
{{artwork.zipcode}

列表组件的ts：

    <table class="table-striped">
      <thead>
        <!-- <th>id</th> -->
        <th>Kunstwerkname</th>
        <th>Strasse</th>
        <th>PLZ</th>
        <th>
          <button class="button-list" (click)="addArtwork()">
            <img src="assets/icons/add.svg">
          </button>
        </th>
      </thead>
      <tbody>
        <tr *ngFor="let artwork of artworkList;" class="artworkList" (mouseover)="previewPopup(artwork)">
          <td>{{artwork.name}}</td>
          <td>{{artwork.streetname}}</td>
          <td>{{artwork.zipcode}}</td>
          <td>
            <button class="button-list" (click)="editArtwork(artwork)">
              <img src="assets/icons/edit.svg">
            </button>
            <button class="button-list" (click)="deleteArtwork(artwork)">
              <img src="assets/icons/delete.svg">
            </button>
          </td>
        </tr>
      </tbody>
    </table>

import { Artwork, ArtworkService } from './../_services/artwork.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-artwork-list',
  templateUrl: './artwork-list.component.html',
  styleUrls: ['./artwork-list.component.css']
})
export class ArtworkListComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  @Output() private preview = new EventEmitter<number>();
  artworkList: Artwork[];

  constructor(
    private artworkService: ArtworkService,
) { }

  ngOnInit() {
    this.refresh();
  }
  refresh() {
    this.artworkService.retrieveAll().then(
      artworkList => this.artworkList = artworkList
    );
  }

  addArtwork() {
    console.log('add artwork');
    this.add.emit();
  }

  editArtwork(artwork: Artwork) {
    console.log('edit artwork ' + artwork.name + ' ' + artwork.id );
    this.edit.emit(artwork.id);
  }

  deleteArtwork(artwork: Artwork) {
    console.log('delete artwork ' + artwork.name + ' ' + artwork.id );
    this.artworkService.delete(artwork.id).then(
      () => this.refresh()
    );
  }

  previewPopup(artwork: Artwork) {
    console.log("hovering mouse");
    console.log(artwork.id);
    this.preview.emit(artwork.id);
  }

}

import { Component, OnInit, Output, EventEmitter, ElementRef, Input } from '@angular/core';

/*When you include the leaflet script inside the Angular project, it gets
loaded and exported into a L variable.*/
declare let L; //this is the leaflet variable!

import { MapButtonsComponent } from './map-buttons/map-buttons';
import { Artwork, ArtworkService } from '../_services/artwork.service';
import { FilterMapComponent } from './filter-map/filter-map.component';



@Component({
  selector: 'app-open-street-map',
  templateUrl: './open-street-map.component.html',
  styleUrls: ['./open-street-map.component.css']
})
export class OpenStreetMapComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  artworkList: Artwork[];
  map;

  // markerIcon
  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [13, 16],
      iconUrl: 'assets/icons/marker.svg',
      shadowUrl: 'assets/icons/marker-shadow.png'
    })
  };

  constructor(
    private artworkService: ArtworkService,
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    this.map = L.map('map', {
      center: [48.208, 16.373],
      zoom: 13,
      zoomControl: false,
    });

    this.refresh();

    // base layer
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      minZoom: 13,
      id: 'mapbox.streets',
      accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
    }).addTo(this.map);

    MapButtonsComponent.renderZoom(this.map);
    MapButtonsComponent.renderCompass(this.map);
    MapButtonsComponent.renderLocation(this.map);
  }

  previewArtwork() {
   this.map.eachLayer(layer => {
  if (layer instanceof L.Marker) {
    this.map.removeLayer(layer);
  }
});
let previewedMarker = L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
  .addTo(this.map)
  .on('mouseover', () => {
    openPopup();
  });
}

  }
}

从“/../\u services/Artwork.service”导入{Artwork，ArtworkService}；
从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
@组成部分({
选择器：“应用程序艺术品列表”，
templateUrl:'./artwork list.component.html'，
样式URL:['./artwork list.component.css']
})
导出类ArtworkListComponent实现OnInit{
@Output（）private add=new EventEmitter（）；
@Output（）private edit=new EventEmitter（）；
@Output（）private preview=new EventEmitter（）；
艺术品列表：艺术品[]；
建造师(
私人艺术品服务：艺术品服务，
) { }
恩戈尼尼特（）{
这个。刷新（）；
}
刷新（）{
这个.ArtWorksService.retrieveAll（）。然后(
artworkList=>this.artworkList=artworkList
);
}
addArtwork（）{
console.log（“添加艺术品”）；
this.add.emit（）；
}
编辑艺术品（艺术品：艺术品）{
console.log（'edit artwork'+artwork.name+''+artwork.id）；
this.edit.emit（artwork.id）；
}
删除艺术品（艺术品：艺术品）{
console.log（'删除artwork'+artwork.name+''+artwork.id）；
这个.artworkService.delete（artwork.id）。然后(
（）=>this.refresh（）
);
}
预览工作组（艺术品：艺术品）{
log（“鼠标悬停”）；
控制台日志（artwork.id）；
this.preview.emit（artwork.id）；
}
}

和映射组件的ts：

    <table class="table-striped">
      <thead>
        <!-- <th>id</th> -->
        <th>Kunstwerkname</th>
        <th>Strasse</th>
        <th>PLZ</th>
        <th>
          <button class="button-list" (click)="addArtwork()">
            <img src="assets/icons/add.svg">
          </button>
        </th>
      </thead>
      <tbody>
        <tr *ngFor="let artwork of artworkList;" class="artworkList" (mouseover)="previewPopup(artwork)">
          <td>{{artwork.name}}</td>
          <td>{{artwork.streetname}}</td>
          <td>{{artwork.zipcode}}</td>
          <td>
            <button class="button-list" (click)="editArtwork(artwork)">
              <img src="assets/icons/edit.svg">
            </button>
            <button class="button-list" (click)="deleteArtwork(artwork)">
              <img src="assets/icons/delete.svg">
            </button>
          </td>
        </tr>
      </tbody>
    </table>

import { Artwork, ArtworkService } from './../_services/artwork.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-artwork-list',
  templateUrl: './artwork-list.component.html',
  styleUrls: ['./artwork-list.component.css']
})
export class ArtworkListComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  @Output() private preview = new EventEmitter<number>();
  artworkList: Artwork[];

  constructor(
    private artworkService: ArtworkService,
) { }

  ngOnInit() {
    this.refresh();
  }
  refresh() {
    this.artworkService.retrieveAll().then(
      artworkList => this.artworkList = artworkList
    );
  }

  addArtwork() {
    console.log('add artwork');
    this.add.emit();
  }

  editArtwork(artwork: Artwork) {
    console.log('edit artwork ' + artwork.name + ' ' + artwork.id );
    this.edit.emit(artwork.id);
  }

  deleteArtwork(artwork: Artwork) {
    console.log('delete artwork ' + artwork.name + ' ' + artwork.id );
    this.artworkService.delete(artwork.id).then(
      () => this.refresh()
    );
  }

  previewPopup(artwork: Artwork) {
    console.log("hovering mouse");
    console.log(artwork.id);
    this.preview.emit(artwork.id);
  }

}

import { Component, OnInit, Output, EventEmitter, ElementRef, Input } from '@angular/core';

/*When you include the leaflet script inside the Angular project, it gets
loaded and exported into a L variable.*/
declare let L; //this is the leaflet variable!

import { MapButtonsComponent } from './map-buttons/map-buttons';
import { Artwork, ArtworkService } from '../_services/artwork.service';
import { FilterMapComponent } from './filter-map/filter-map.component';



@Component({
  selector: 'app-open-street-map',
  templateUrl: './open-street-map.component.html',
  styleUrls: ['./open-street-map.component.css']
})
export class OpenStreetMapComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  artworkList: Artwork[];
  map;

  // markerIcon
  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [13, 16],
      iconUrl: 'assets/icons/marker.svg',
      shadowUrl: 'assets/icons/marker-shadow.png'
    })
  };

  constructor(
    private artworkService: ArtworkService,
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    this.map = L.map('map', {
      center: [48.208, 16.373],
      zoom: 13,
      zoomControl: false,
    });

    this.refresh();

    // base layer
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      minZoom: 13,
      id: 'mapbox.streets',
      accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
    }).addTo(this.map);

    MapButtonsComponent.renderZoom(this.map);
    MapButtonsComponent.renderCompass(this.map);
    MapButtonsComponent.renderLocation(this.map);
  }

  previewArtwork() {
   this.map.eachLayer(layer => {
  if (layer instanceof L.Marker) {
    this.map.removeLayer(layer);
  }
});
let previewedMarker = L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
  .addTo(this.map)
  .on('mouseover', () => {
    openPopup();
  });
}

  }
}

从'@angular/core'导入{Component，OnInit，Output，EventEmitter，ElementRef，Input}；
/*当您将传单脚本包含在Angular项目中时，它将
加载并导出到L变量中*/
宣布让L//这是传单变量！
从“./map buttons/map buttons”导入{MapButtonsComponent}；
从“../\u services/Artwork.service”导入{Artwork，ArtworkService}；
从“./filter-map/filter-map.component”导入{filtermappcomponent}；
@组成部分({
选择器：“应用程序开放街道地图”，
templateUrl:'./open street map.component.html'，
样式URL:['./打开街道地图.component.css']
})
导出类OpenStreetMapComponent实现OnInit{
@Output（）private add=new EventEmitter（）；
@Output（）private edit=new EventEmitter（）；
艺术品列表：艺术品[]；
地图；
//马克里肯
markerIcon={
图标：L.icon({
iconSize:[25,41]，
iconAnchor:[13,16]，
iconUrl:'assets/icons/marker.svg'，
shadowUrl:'assets/icons/marker shadow.png'
})
};
建造师(
私人艺术品服务：艺术品服务，
私有elementRef:elementRef
) { }
恩戈尼尼特（）{
this.map=L.map（'map'{
中间：[48.208,16.373]，
缩放：13，
动物控制：错误，
});
这个。刷新（）；
//基层
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={accessToken}'{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
minZoom:13，
id:“地图盒。街道”，
accessToken:'pk.eyj1ijoichcxn2wwmdgilchijoi2pua2c2owxumgvkotnxbwh5mwnqajewdyj9.X_SuGwNGs12TwCsrsUvBxw'
}).addTo（此.map）；
MapButtonsComponent.renderZoom（this.map）；
MapButtonsComponent.renderComponent（this.map）；
MapButtonsComponent.renderLocation（this.map）；
}
预览工作（）{
this.map.eachLayer（层=>{
if（L.Marker的图层实例）{
此.map.removeLayer（层）；
}
});
让previewedMarker=L.marker（[artwork.latitude，artwork.latitude]，this.markerIcon）
.addTo（此.map）
.on（'mouseover'，（）=>{
openPopup（）；
});
}
}
}

不要使用

鼠标盖

你必须听

鼠标键

和

鼠标键

在

mouseenter

上，您将创建一个弹出窗口并将其放置在地图上；在

mouseleave

上，您将关闭弹出窗口

带有jQuery的示例代码（我的postContent等同于您的作品）

要实现这一点，您需要为所有艺术品提供一个唯一的id（在我的示例中为postId），并将您的标记放入关联数组

markersByGlobalId

这可能是有用的：而且

我的例子是monolitic（1个html，1个js文件）。在Angular应用程序中使用它需要一些额外的工作。

可以考虑以下方法。假设标记的初始数据以以下格式表示：

locations = [
    {
      name: "Oslo",
      lat: 59.923043,
      lng: 10.752839
    },
    {
      name: "Stockholm",
      lat: 59.339025,
      lng: 18.065818
    },
    //..
  ];

然后，对于地图上的给定数据标记，可以如下初始化：

this.markers = this.locations.map(loc => {
    const marker = new L.marker({ lat: loc.lat, lng: loc.lng });
    marker.bindPopup(loc.name);
    marker.addTo(map);
    return marker;
});

现在轮到选择器组件和映射本身之间的通信了，让我们假设以下选择器：

<ul>
  <li (mouseenter) ="mouseEnter(idx) "  (mouseleave) ="mouseLeave(idx)"  *ngFor="let loc of locations; let idx = index">{{ loc.name }}</li>
</ul>

创建指令怎么样？是传单问题还是角度问题？你知道如何只用传单就可以做到吗？@YaFred我猜解决方案/问题包括两个方面！是的，对于传单，只需添加“鼠标悬停”而不是“单击”即可打开弹出窗口，但如果鼠标位于标记上，则特别适用。我试图实现的是，当我浏览屏幕左侧的列表时，弹出窗口会打开。右边是带有标记的地图，左边是标记列表。我希望当我在列表上悬停时，相应的标记会打开它们的弹出窗口。我希望我已经把它表达到了一个可以理解的程度。我一直收到错误“selectedMarker.openPopup不是一个函数”，有什么想法吗？我已经适应了