我可以使用Google Maps API在工具提示中创建链接吗?

时间:2018-12-14 01:34:39

标签: angular google-maps google-maps-api-3

我正在使用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)
})
}

非常感谢!让我知道是否可以澄清任何事情!

0 个答案:

没有答案