Angular从谷歌地图组件中的地点ID获取纬度和经度

Question

试图从谷歌地图预测信息中获取经纬度。目前，我正在使用google-maps 组件。

我也设法在ngx-google-places-autocomplete 中加入了搜索栏。我需要的是在用户单击输入时获取第一个搜索结果项的坐标。 这是我目前所拥有的：

<input
    id="over_map"
    ngx-google-places-autocomplete
    class="form-control location-search d-flex justify-content-center"
    #placesRef="ngx-places"
    [(ngModel)]="searchLocation"
    (autocomplete)="valueCompleted($event)"
    (keydown)="onKeydown($event,searchLocation)"
    (onAddressChange)="handleAddressChange($event)"/>
    <google-map
      id="google_map"
      height="330px"
      width="100%"
      [center]="center"
      [zoom]="zoom"
      [options]="options"
      (mapClick)="clickLocation($event)"
    >
      
    </google-map>

在我的onKeydown 方法中：

  onKeydown($event: KeyboardEvent, searchLocation) {
    if ($event.key === 'Enter') {
      console.log(JSON.stringify(this.map.getCenter()));
      let searchPrediction: any;

      const displaySuggestions = function(
      predictions: google.maps.places.QueryAutocompletePrediction[],
      status: google.maps.places.PlacesServiceStatus
    ) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }

      console.log('Current prediction', predictions[0]);
      console.log('Location Details:', predictions[0].place_id);
      searchPrediction = predictions[0];
    };
      const service = new google.maps.places.AutocompleteService();
      service.getQueryPredictions({ input: this.searchLocation }, displaySuggestions);

      }
  }

这将获取所有预测项，并获取predictions[0] 看到的所有预测项中的第一个。据我所知，我只能从这里得到place id。

例如，mon 的搜索结果如下：

description: "Montreal, QC, Canada", id: "64f76606728b9536f3b6f03703a296affd47ca6c", matched_substrings: Array(1), place_id: "ChIJDbdkHFQayUwR7-8fITgxTmU", reference: "ChIJDbdkHFQayUwR7-8fITgxTmU", …}

Answer 1

如果有人现在正在看这个，我通过以下方式进行了解决：

 onKeydown($event: KeyboardEvent, searchLocation) {
    if ($event.key === 'Enter') {
      this.readyForSubmit = true;
    }
    if (this.searchLocation) {
      this.zoomToSearch();
    }
  }


  private zoomToSearch() {
    const displaySuggestions = function (
      predictions: google.maps.places.QueryAutocompletePrediction[],
      status: google.maps.places.PlacesServiceStatus
    ) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }

      const completeUrl = 'https://maps.googleapis.com/maps/api/geocode/json?place_id=' + predictions[0].place_id + '&key=API-KEY-HERE';
      axios.get(completeUrl)
        .then(response => {
          // get the first item from the results
          searchPrediction = response.data.results[0].geometry.location;
        })
        .catch(error => {
          console.log(error);
        });
    };
    const service = new google.maps.places.AutocompleteService();
    // get the input value 
    service.getQueryPredictions({ input: this.searchLocation }, displaySuggestions);
    service.getQueryPredictions({ input: this.searchLocation }, displaySuggestions);
    this.location = searchPrediction;
  
  }

如您所见，一旦重新获得结果，我就会得到第一个项目。我的 HTML 文件：

<input 
    id="over_map" ngx-google-places-autocomplete
    class="form-control location-search d-flex justify-content-center" #placesRef="ngx-places"
    [(ngModel)]="searchLocation" (keydown)="onKeydown($event,searchLocation)"
    (onAddressChange)="handleAddressChange($event)" />

    <google-map 
        id="google_map" 
        height="330px" 
        width="100%" 
        [center]="center" 
        [zoom]="zoom" 
        [options]="options"
        (mapClick)="clickLocation($event)">
       
         <map-marker 
           (mapDrag)="markerDragLocation($event)" 
           [position]="marker.position" 
           [title]="marker.title"
           [options]="marker.options">
         </map-marker>
    </google-map>

在这种情况下，您可以监听特定的按键事件。在我的情况下，我选择 enter 键，同时使用ngModel 绑定搜索词。

这似乎工作正常，可以单击以获取坐标或搜索以从下拉列表中获取第一项。