Можно ли создать ссылку из всплывающей подсказки с помощью API Карт Google? - PullRequest
Новая
       24

Можно ли создать ссылку из всплывающей подсказки с помощью API Карт Google?

0 голосов
/ 14 декабря 2018

Я использую Angular 5 для построения ряда точек (точек мониторинга) на карте Google.Мне бы хотелось, чтобы всплывающая подсказка (отображающая имя точки мониторинга) была ссылкой (на страницу о каждой точке мониторинга в моем приложении).Как я могу это сделать?

Я пробовал такие вещи, как: 

toolTip: '<a>' + element.name + '</a>'

Не повезло.Кажется, не могу этого сделать, поскольку он находится в файле TS, а не в html.Мне нужно будет добавить туда тег [router-link], например 

[routerLink]="['/site/', site.id ]"

Вот мой код Google из моего компонента Angular: 

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)
})
}

Большое спасибо!Дайте мне знать, если я смогу что-то уточнить!

...