Angular 从 google 地图组件中的地点 ID 获取经纬度

Question

正在尝试从google地图预测信息中获取经纬度。目前，我正在使用 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;
  
  }

如您所见，一旦结果 re-obtained，我将获得第一项。我的 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>

在这种情况下，你可以听一个特定的键event.In我的情况，我选择了enter键，同时使用ngModel绑定搜索任期。

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

Angular 从 google 地图组件中的地点 ID 获取经纬度

Angular get latitude and longitude from place id in google maps component

google-maps

google-maps-api-3

typescript

angular