Ionic 2 谷歌地图标记点击
Posted
技术标签:
【中文标题】Ionic 2 谷歌地图标记点击【英文标题】：Ionic 2 google maps marker click 【发布时间】：2017-10-20 03:17:50 【问题描述】：我有一张带有一个标记的地图，当我单击标记时，我希望名称显示在工具栏中。当我单击 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>
【问题讨论】：
【参考方案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。
【讨论】：
Sweet，找了这么久:) ty。你能解释一下为什么会发生这种情况吗？ 我没有使用过 google maps api .. 但看起来所做的更改超出了 Angular 执行更改检测的区域。 blog.thoughtram.io/angular/2016/01/22/understanding-zones.html 太棒了，我也被困在这个问题上！它奏效了，我也想知道背后的魔力.. ngZone 文档只是给出了更多的疑问......以上是关于Ionic 2 谷歌地图标记点击的主要内容，如果未能解决你的问题，请参考以下文章