小册子打开弹出鼠标悬停在列表上
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小册子打开弹出鼠标悬停在列表上相关的知识,希望对你有一定的参考价值。
我的应用程序的一个视图是,一侧是所有引脚的列表,另一侧是实际引脚的映射。
当我用鼠标悬停在列表中时,我希望弹出窗口打开。让我们说我的鼠标在列表中排在第一位,我想要打开相应引脚的弹出窗口。
这是列表组件中的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>
列表组件的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);
}
}
和地图组件的ts:
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 © <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();
});
}
}
}
答案
可以考虑以下方法。让我们假设标记的初始数据以下列格式表示:
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();
}
另一答案
而不是使用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);
});
要实现这一点,你需要为你的所有作品(在我的例子中为postId)提供一个唯一的id,并将你的标记放在一个关联数组中markersByGlobalId
这可能很有用:http://franceimage.github.io/map和http://franceimage.github.io/map-v1
我的例子是monolitic(1个html,1个js文件)。您需要一些额外的工作才能在Angular应用中使用它。
以上是关于小册子打开弹出鼠标悬停在列表上的主要内容,如果未能解决你的问题,请参考以下文章