我的应用程序的一个视图是,一侧上所有引脚的列表,另一侧上有实际引脚的映射。
我希望在用鼠标悬停列表时打开弹出窗口。可以说我的鼠标在列表上的#1上,我想打开相应引脚的弹出窗口。
这是列表组件中的html:
overallStackView
列表组件的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>
地图组件的和ts:
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);
}
}
答案 0 :(得分:1)
可以考虑以下方法。假设标记的初始数据以以下格式表示:
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>
然后可以像这样控制弹出窗口的可见性:
mouseEnter(selectedIndex) {
const selectedMarker = this.markers[selectedIndex];
selectedMarker.openPopup();
}
mouseLeave(selectedIndex) {
const selectedMarker = this.markers[selectedIndex];
selectedMarker.closePopup();
}
答案 1 :(得分:0)
您不必收听mouseover
和mouseenter
mouseleave
在mouseenter
上,您将创建一个弹出窗口并将其放置在地图上,在mouseleave
上,您将关闭该弹出窗口
带有jQuery的示例代码(我的postContent等于您的插图)
$("div.postContent").on("mouseenter", function(e) {
var postId = $(this).attr("data-postId");
tooltipPopup = L.popup();
var title = postlistByGlobalId[postId].title;
tooltipPopup.setContent(title);
tooltipPopup.setLatLng(markersByGlobalId[postId].getLatLng());
tooltipPopup.openOn(map);
$(this).addClass('hover');
});
$("div.postContent").on("mouseleave", function(e) {
$(this).removeClass('hover');
map.closePopup(tooltipPopup);
});
要实现这一点,您需要为所有艺术品提供唯一的ID(在我的示例中为postId),并将标记放置在关联数组markersByGlobalId
这可能很有用:http://franceimage.github.io/map和http://franceimage.github.io/map-v1
我的示例是独占的(1个html,1个js文件)。您需要做一些额外的工作才能在Angular应用中使用它。