Angular 2 个 agm 库,用于 google 地图设置地点 ID
Angular 2 agm library for google maps setting place by place id
我在页面中实现了一个 google 地图,其中传递了一个地点 ID,然后我需要获取该地点 ID 并使用该标记加载地图。我正在浏览文档,但不清楚如何从 <agm-map>
标记定位地图对象,以便我可以设置地点 ID。这是部分代码:
public latitude: number;
public longitude: number;
public zoom: number;
public placeid: string;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) {}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ";
//set current position
this.setCurrentPosition();
this.mapsAPILoader.load().then(() => {
//How do i set the agm-map here to load the map with the placeid
});
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
然后在 html 文件中我有这样的东西:
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
我查看了 GOOGLE 文档,它看起来像设置地点 ID,你需要这样的东西
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
我遇到的问题是我不确定要为 map
传递什么,因为我使用的是 <agm-map>
。
您可以使用 agm-map
的 mapReady
输出 属性。将您的 html 更改为
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
并在您的组件中定义以下函数。当您的地图准备就绪时,将调用此函数。
mapReady($event: any) {
// here $event will be of type google.maps.Map
// and you can put your logic here to get lat lng for marker. I have just put a sample code. You can refactor it the way you want.
this.getLatLong('ChIJN1t_tDeuEmsRUsoyG83frY4', $event, null);
}
getLatLong(placeid: string, map: any, fn) {
let placeService = new google.maps.places.PlacesService(map);
placeService.getDetails({
placeId: placeid
}, function (result, status) {
console.log(result.geometry.location.lat());
console.log(result.geometry.location.lng())
});
}
根据您的需要更改/重构此示例代码,以便您能够为传递给 html.
的纬度和经度参数设置值
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
我在页面中实现了一个 google 地图,其中传递了一个地点 ID,然后我需要获取该地点 ID 并使用该标记加载地图。我正在浏览文档,但不清楚如何从 <agm-map>
标记定位地图对象,以便我可以设置地点 ID。这是部分代码:
public latitude: number;
public longitude: number;
public zoom: number;
public placeid: string;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) {}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ";
//set current position
this.setCurrentPosition();
this.mapsAPILoader.load().then(() => {
//How do i set the agm-map here to load the map with the placeid
});
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
然后在 html 文件中我有这样的东西:
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
我查看了 GOOGLE 文档,它看起来像设置地点 ID,你需要这样的东西
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
我遇到的问题是我不确定要为 map
传递什么,因为我使用的是 <agm-map>
。
您可以使用 agm-map
的 mapReady
输出 属性。将您的 html 更改为
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
并在您的组件中定义以下函数。当您的地图准备就绪时,将调用此函数。
mapReady($event: any) {
// here $event will be of type google.maps.Map
// and you can put your logic here to get lat lng for marker. I have just put a sample code. You can refactor it the way you want.
this.getLatLong('ChIJN1t_tDeuEmsRUsoyG83frY4', $event, null);
}
getLatLong(placeid: string, map: any, fn) {
let placeService = new google.maps.places.PlacesService(map);
placeService.getDetails({
placeId: placeid
}, function (result, status) {
console.log(result.geometry.location.lat());
console.log(result.geometry.location.lng())
});
}
根据您的需要更改/重构此示例代码,以便您能够为传递给 html.
的纬度和经度参数设置值<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>