为什么我无法保留通过谷歌地图的返回地址
问题描述:
我能够得到google map
的address
但留不住address
我page
为什么我无法保留通过谷歌地图的返回地址
这里是我的代码:
title:string;
informationWindowTitle:string;
address:string;
@ViewChild('map') mapElement: ElementRef;
map: any;
geocodeLatLng(lat, lng) {
var geocoder = new google.maps.Geocoder;
var latlng = {
lat: lat,
lng: lng
};
geocoder.geocode({
'location': latlng
}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
//This is yout formatted address
//window.alert(results[0].formatted_address);
console.log(results[0].formatted_address);
this.title = results[0].formatted_address;
this.informationWindowTitle = results[0].formatted_address;
console.log(this.informationWindowTitle);
return results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.geocodeLatLng(position.coords.latitude,position.coords.longitude);
// console.log(this.address);
this.addMarker();
// this.title = this.address;//results[0].formatted_address;
// this.informationWindowTitle = this.address;//results[0].formatted_address;
}, (err) => {
console.log(err);
});
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click',() => {
infoWindow.open(this.map, marker);
});
}
addMarker(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let content = '<h4>Your Current Location!</h4><p>'+this.address+'</p>';
this.addInfoWindow(marker, content);
}
我想要做的是摘录
geocodeLatLng(lat, lng) {
// this function returns address
}
initializtion 1. loadMap()2. geocodeLatLng()
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
this.geocodeLatLng(position.coords.latitude,position.coords.longitude); // sending co-ordinates to above function which returns the address
this.addMarker(); // then adding marker
}, (err) => {
console.log(err);
});
}
please refer this for getting
地址:how to get current postion name using google map api
当我分配这些属性我没有得到其值
this.title = results[0].formatted_address;
this.informationWindowTitle = results[0].formatted_address;
QUESTION为什么?但我能进去function geocodeLatLng()
答
尝试增加回调,并使用箭头功能保留此:
geocoder.geocode({'location': latlng}, (results, status) => {
if (results[0]) {
this.doSomething(results[0].formatted_address);
}
else {
window.alert('No results found');
}...
而且回调函数:
doSomething(formatted_address){
this.title = formatted_address;
this.informationWindowTitle = formatted_address;
}
答
你的问题是,里面的this.title
function(results, status) {...}
不是您声明的title
。
你必须做什么是使用箭头功能
this.geocoder.geocode({
'location': latlng
}, (results, status) => {
if (status === 'OK') {
if (results[0]) {
//This is yout formatted address
//window.alert(results[0].formatted_address);
console.log('result[0]', results[0].formatted_address);
this.title = results[0].formatted_address;
this.informationWindowTitle = results[0].formatted_address;
console.log(this.informationWindowTitle);
// add this to force Angular detect Changes
this.changeDetectorRef.detectChanges();
return results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
当我测试你的代码,角不当标题更新的检测,所以我必须强制角度去做。这是使用ChangeDetectorRef的方法。
Import { ChangeDetectorRef } from '@angular/core';
constructor(..,public changeDetectorRef: ChangeDetectorRef){..}
希望这可以帮助!
你的'答案'似乎是'智能'。我有一个问题,我会在哪里放置上面的'代码' – EaB
只需导入'ChangeDetectorRef'并将其注入'构造函数'中。 然后像我一样修复你的'geocodeLatLng(lat,lng)'函数中的代码 –