Question

我有一个带有一个标记的地图，当我点击标记时，我希望名称显示在工具栏中。当我单击console.log时显示正确的值但工具栏中没有任何更新。但是，如果我单击标记并更改标签然后返回它就可以了。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  name: string = "";
  constructor(public navCtrl: NavController) {
  }
  ionViewDidLoad() {
    this.initializeMap();
  }
  initializeMap() {
    let letLng = new google.maps.LatLng(62.3908, 17.3069);
    let mapOptions = {
      center: letLng,
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    this.addMarker();
  }
  addMarker() {
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: { lat: 62.3908, lng: 17.3069 },
      title: 'Kalle'
    })
    let content = `<h1>Kalle</h1>`;
    this.addInfoWindow(marker, content);
  }
  addInfoWindow(marker, content) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      this.name = marker.title;
      infoWindow.open(this.map, marker)
    })
  }
  change() {
    this.name = "Patrik";
  }
}
 <<<<<<<<<<<<<<<HTML>>>>>>>>>>>>>>>>>>>><
<ion-header>
  <ion-navbar>
    <ion-title>{{name}}</ion-title>
    <button ion-button (click)="change()">Clcik</button>
  </ion-navbar>
</ion-header>
<ion-content>
<div #map id="map"></div>
</ion-content>

Answer 1

尝试使用NgZone API。

import {NgZone} from @angular/core

//inject in constructor
 constructor(public navCtrl: NavController,private ngZOne:NgZone) {}
 //....

 google.maps.event.addListener(marker, 'click', () => {
  //Call run function to set the data within angular zone to trigger change detection.
  this.ngZone.run(()=>{
     this.name = marker.title;
     infoWindow.open(this.map, marker)
  });
})

NgZone API。

离子2谷歌地图标记点击

1 个答案: