使用Google Places搜索框来检索仅地址结果

Question

我正在使用自动完成功能进行地图搜索，其中一旦选择了新地址，当前标记将被删除并替换为用户搜索的地址。要做到这一点，我使用的是搜索框，但是一些结果显示在自动完成功能上不起作用，比如“shopping”或“audi”，它会在地图上为每个地方的结果添加一个标记。我正试图将这些结果过滤到地址，但似乎无法使其工作。我不断地看到文档中的类型：地址属性，但似乎无法弄清楚在这种情况下会发生什么。任何帮助真正感谢！这里是我的代码：

function initAutocomplete() { 
     var map = new google.maps.Map(document.getElementById('gmap_canvas'), { 
      zoom: 14, 
      center: new google.maps.LatLng(39.711383, -105.018230), 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      zoomControl: true, 
      streetViewControl: true, 
      mapTypeControl: false 
     }); 

     var myLatLng = {lat: 39.711383, lng: -105.018230}; 

     var icon = { 
      url: "../../../images/gold-delivery-128.png", 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(64, 64) 
     }; 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: icon 
     }); 

     // Create the search box and link it to the UI element. 
     var input = document.getElementById('locationTextField'); 
     var searchBox = new google.maps.places.SearchBox(input); 

     // Bias the SearchBox results towards current map's viewport. 
     map.addListener('bounds_changed', function() { 
      searchBox.setBounds(map.getBounds()); 
     }); 

     var markers = []; 
     // Listen for the event fired when the user selects a prediction and retrieve 
     // more details for that place. 
     searchBox.addListener('places_changed', function() { 
      var places = searchBox.getPlaces(); 

      if (places.length == 0) { 
      return; 
      } 

      // Clear out the old markers. 
      markers.forEach(function(marker) { 
      marker.setMap(null); 
      }); 
      markers = []; 

      marker.setVisible(false); 

      // For each place, get the icon, name and location. 
      var bounds = new google.maps.LatLngBounds(); 
      places.forEach(function(place) { 
      var icon = { 
       url: "../../../images/gold-delivery-128.png", 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(64, 64) 
      }; 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
       map: map, 
       icon: icon, 
       title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       // Only geocodes have viewport. 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
      }); 
      map.fitBounds(bounds); 

     }); 
     } 

Answer 1

SearchBox doesn't allow any filtering (its only option is a google.maps.LatLngBounds)。另一个选项是Places Autocomplete，它接受type option。你可以看到其中的一个是否支持你的用例（可能geocode或establishment可以工作）。

Answer 2

一个简单的方法是结果的过滤，就像这样：

// Clear out the old markers. 
markers.forEach(function(marker) { 
    marker.setMap(null); 
}); 
markers = []; 

marker.setVisible(false); 

<!---- Filtering the results : start ------> 
places = places.filter(function(place) { 
    return place.types.indexOf('locality') > -1 || 
      place.types.indexOf('political') > -1; 
}); 
<!---- Filtering the results : end ------> 

// For each place, get the icon, name and location. 
var bounds = new google.maps.LatLngBounds(); 
places.forEach(function(place) { 
    ... 

支持的类型在这里： https://developers.google.com/maps/documentation/geocoding/intro#Types