Google Maps API PlacesService建议显示超出范围的结果

时间:2019-03-27 14:52:07

标签: javascript google-maps google-places-api

我当前正在使用Google Maps API中的PlacesService库。我想为纽约市提出建议。我为此添加了strict_bounds,但仍然获得了纽约以外的结果,如图所示。enter image description here

在大多数情况下都可以,但是我有很多建议。

/** @private {?this._google.maps.Map} The google map object. */
this._map = new this._google.maps.Map(this._mapEl, {
  zoom: 11,
  center: this._mapPosition
});

/** @private {this._google.maps.places.Autocomplete}Autocomplete instance */
this._service = new this._google.maps.places.AutocompleteService();

/** @private {this._google.maps.places.PlaceService}PlaceService instance */
this._placeService = new this._google.maps.places.PlacesService(this._map);

这是构造函数中的实例。

  // Attach handler for the autocomplete search box. This updates the map
    // position and re-sorts locations around that position.
    this._searchEl.addEventListener('keyup', (event) => {
      if(event.target.value) {
        this._service.getPlacePredictions({
           input: event.target.value,
           offset: 3,
           strictBounds: true,
           types: ['geocode'],
           bounds: this._map.getBounds()
        }, (predictions) => {
          if(predictions) {
            let results = predictions.map(e => [e['description']]);

            event.target.missplete = new MissPlete({
              input: event.target,
              options: results,
              className: 'c-autocomplete'
            })

            event.target.missplete.select = () => {
              let msplt = event.target.missplete;

              if (msplt.highlightedIndex !== -1) {
                msplt.input.value = msplt
                  .scoredOptions[msplt.highlightedIndex].displayValue;
                msplt.removeDropdown();

                console.dir('we did it');

              }
            };

            event.target.predictions = predictions;

            console.log(event.target.predictions);
          }
        });
      }
    });

有一种方法displayPlacesOnMap获取一组Google地方对象。在这里,我们得到place_id以便利用PlaceService库。

   displayPlacesOnMap(mapItems) {
     if(mapItems) {
       mapItems.forEach(place => {
         let request = {
            placeId: place.place_id,
            fields: ['name', 'formatted_address', 'place_id', 'geometry']
         }

         const officeMap = this;

         this._placeService.getDetails(request, function(place, status) {
            if (status === 'OK') {
              officeMap._mapPosition = place.geometry.location;
              officeMap._map.panTo(officeMap._mapPosition);
              officeMap.sortByDistance().clearLocations().updateUrl().updateList()
                  .updateUrl();
              $(officeMap._searchEl).blur();
            }
         })
       })
     }
   };

0 个答案:

没有答案