谷歌地图的角2 agm库设置的地方由地点编号 [英] Angular 2 agm library for google maps setting place by place id

问题描述

我在一个页面中实现了一个地图id传递给我的谷歌地图，然后我需要获取这样的地点id并用该标记加载地图。我正在浏览文档，但不清楚我如何从< agm-map> 标签中定位地图对象，以便我可以设置地点标识。这里是代码的一部分：

  public latitude：number; 
公共经线：号码; 
 public zoom：number; 
 public placeid：string; 
 
构造函数（
 private mapsAPILoader：MapsAPILoader，
 private ngZone：NgZone 
）{} 
 
 ngOnInit（）{
 //设置谷歌地图默认
 this.zoom = 4; 
 this.latitude = 39.8282; 
 this.longitude = -98.5795; 
 this.placeid =ChIJMS2FahDQzRIRcJqX_aUZCAQ; 
 
 //设置当前位置
 this.setCurrentPosition（）; 
 
 this.mapsAPILoader.load（）。then（（）=> {
 //如何在这里设置agm-map来载入带有placeid 
的地图
}）; 
} 
 
 private setCurrentPosition（）{
 if（导航器中的geolocation）{
 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 [变焦] = 变焦 > 
< 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）; 
 
 
 $ / code $ / pre 
 
 
我遇到的问题是我不确定为 map 传递的内容，因为我使用的是< agm-map> 。
 $ b $您可以使用 mapReady   agm-map 。将您的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将会是google.maps.Map 
类型//你可以把你的逻辑放在这里来获取标记。我刚刚放了一个示例代码。你可以按照你想要的方式重构它。 
 this.getLatLong（'ChIJN1t_tDeuEmsRUsoyG83frY4'，$ event，null）; 
 
 $ b $ 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（））
}）; 
 
 $ / code> 
根据您的需要更改/重构此示例代码，以便您可以设置
 < agm-marker [latitude] =纬度[纬度]经度] = 经度 >< / AGM-标记> 
  
 
I am implementing in a page a google map where a place id is passed to me, I then need to obtain such place id and load the map with that marker. I was going through the documentation but its not clear on how i can target the map object from the <agm-map> tag so that i can set the place id. Here is part of the code:
  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;
        });
      }
    }
Then on the html file I have something like this:
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
      <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
I looked at the GOOGLE documentation and it looks like to set the place id you would need something like this
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);
  }
}
The problem i have is that i am not sure as to what to pass for map since i am using <agm-map>.
解决方案
You can use mapReady output property of agm-map. Change your html to 
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)">
      <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
and define following functions in your component. This function will be called when your map is ready.
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())
      });
  }
Change / refactor this sample code according to your need such that you are able set values to latitude and longitude parameters that you are passing to html.
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>


                        
这篇关于谷歌地图的角2 agm库设置的地方由地点编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！