我正在使用Angular 5在Google Map上绘制一系列点(监视点)。我想将工具提示(显示监视点名称)作为链接(到我的应用程序中有关每个监视点的页面)。我该怎么办?
我尝试过类似的事情:
toolTip: '<a>' + element.name + '</a>'
没有运气。由于它位于TS文件而不是html中,因此似乎无法执行此操作。我将需要在其中加入[router-link]标签,例如
[routerLink]="['/site/', site.id ]"
这是我在Angular组件中的Google代码:
getOneSite(id) {
let observable = this.authService.getOneSite(this.current_site_hid)
observable.subscribe(data => {
this.current_site = data
this.markers = []
var newobj = {
lat: 0,
lng: 0,
toolTip: ""
}
var mapProp = {
center: new google.maps.LatLng(this.current_site.latitude, this.current_site.longitude),
zoom: 14,
mapTypeId: google.maps.MapTypeId.HYBRID
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.map.setMapTypeId('roadmap')
var marker = new google.maps.Marker({ position: mapProp.center });
marker.setMap(this.map);
var infowindow = new google.maps.InfoWindow({
content: "<strong>" + this.current_site.name + "</strong>" + "<br>" + "Latitude: " + this.current_site.latitude + "<br>" + "Longitude: " + this.current_site.longitude
});
this.authService.getAllMonitoringPoints(this.current_site_hid)
.subscribe(data => {
this.monitoring_points = data
this.monitoring_points.forEach(element => {
newobj.lat = element.latitude
newobj.lng = element.longitude
newobj.toolTip = '<a>' + element.name + '</a>', element.latitude. element.longitude
this.markers.push(newobj)
newobj = {
lat: 0,
lng: 0,
toolTip: ""
}
console.log(this.markers)
});
infowindow.open(this.map, marker);
this.setMultipleMarker(this.markers, this);
})
})
}
setMultipleMarker(markers, self) {
markers.forEach(function (marker) {
(function (marker) {
let mark = new google.maps.Marker({ position: new google.maps.LatLng(marker.lat, marker.lng) });
let infowindow = new google.maps.InfoWindow({ content: marker.toolTip });
infowindow.open(self.map, mark);
mark.setMap(self.map);
})(marker)
})
}
非常感谢!让我知道是否可以澄清任何事情!