Google Map InfoWindow的onclick内容

时间:2019-05-10 19:04:49

标签: angular google-maps infowindow

我有带有多个标记的离子应用Google Map。我正在尝试在我的InfoWindow中显示每个标记的信息。我已经完全自定义了信息窗口,但是当用户单击图标标记并单击内容信息窗口时,我要创建内容。内容导航到另一个页面。我确实喜欢这样,但是当我单击图标标记时,他立即导航到另一页。 !

 loadMap() {

    let htmlInfoWindow = new HtmlInfoWindow();
    let frame: HTMLElement = document.createElement('div');

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: this.points,
      }

    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    for (let i = 0; i < this.checking.features.length; i++) {

      let coords = this.checking.features[i].geometry.coordinates;
      let text = '' + this.checking.features[i].properties.title + '';
      let mag = 'M '+this.checking.features[i].properties.mag
      let date = this.checking.features[i].properties.time
      let ids = this.checking.features[i].properties.ids
      let latLng = new LatLng(coords[1], coords[0]);

      let dateTime = this.convertUTCDateToLocalDate(new Date(date));

      let finalTime = dateTime.toLocaleTimeString()

      let html = `<spanstyle="font-weight: bold;>${text}</span>
      <p style="color: #1a077d;">${mag} -  at ${finalTime} - ${ids}</p>`


      console.log(date)
      let marker: Marker = this.map.addMarkerSync({
        position: latLng,
        icon:'./assets/10.png'

      })


      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        htmlInfoWindow.open(marker)
        htmlInfoWindow.setContent(html)

        this._ngZone.run(() => {
          this.nav.navigateForward(`/details/${ids}`);
        })



      })




    }



  }
当用户单击图标标记并显示信息时,我想这样做,然后,如果用户要单击内容信息,请导航到另一页。有什么想法吗?

0 个答案:

没有答案