我可以將Google Maps API自動填充結果限制在愛爾蘭和北愛爾蘭

Question

目前我可以將結果限制爲愛爾蘭和英國（GB），但我需要將結果限制在愛爾蘭島（愛爾蘭&北愛爾蘭），但作爲北愛爾蘭是英國的一部分我正在使用國家代碼得到整個英國的結果，例如& gb

但是，我將如何限制這個國家 - 愛爾蘭和地區 - 北愛爾蘭？

感謝您的幫助提前

VAR countryCodes = [ '即'， 'GB'];

 function initMap() { 
      var autoInputs = []; 

      // Destroy all existing inputs and reload them. 
      function autoAllInputs() { 
       autoInputs = []; 
       $.each($(".js-location-input"), function(i, input) { 
        var ainput = new google.maps.places.Autocomplete(input); 
        ainput.setComponentRestrictions({'country': countryCodes}); 
        autoInputs.push(ainput); 
       }); 
      } 

      var $template = $(".js-repeat-template"); 
      var $container = $(".js-repeated-items"); 

      $(".js-add-repeatable").on("click", function(e) { 
       e.preventDefault(); 
       $container.append($template.html()); 
       autoAllInputs(); 
      }); 

      autoAllInputs(); 

Answer 1

目前無法在自動填充位置添加管理區域過濾器。您的使用案例的唯一解決方法是定義包含愛爾蘭和北愛爾蘭的界限，並將strictBounds參數設置爲等於autocomplete options的真值。

概念證明

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: 53.435719, lng: -7.77832}, 
 
    zoom: 6, 
 
    scaleControl: true 
 
    }); 
 
    
 
    var irelandBounds = new google.maps.LatLngBounds(
 
    new google.maps.LatLng(50.999929,-10.854492), 
 
    new google.maps.LatLng(55.354135,-5.339355)); 
 
    
 
    map.fitBounds(irelandBounds); 
 
    
 
    var boundsPoly = new google.maps.Polyline({ 
 
    map: map, 
 
    path: [ 
 
     {lat: irelandBounds.getSouthWest().lat(), lng: irelandBounds.getSouthWest().lng()}, 
 
     {lat: irelandBounds.getSouthWest().lat(), lng: irelandBounds.getNorthEast().lng()}, 
 
     {lat: irelandBounds.getNorthEast().lat(), lng: irelandBounds.getNorthEast().lng()}, 
 
     {lat: irelandBounds.getNorthEast().lat(), lng: irelandBounds.getSouthWest().lng()}, 
 
     {lat: irelandBounds.getSouthWest().lat(), lng: irelandBounds.getSouthWest().lng()} 
 
    ], 
 
    strokeColor: "#FF0000" 
 
    }); 
 

 
    
 
    var input = /** @type {!HTMLInputElement} */(
 
     document.getElementById('pac-input')); 
 

 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 
    
 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
 
    bounds: irelandBounds, 
 
    strictBounds: true 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    anchorPoint: new google.maps.Point(0, -29) 
 
    }); 
 

 
    autocomplete.addListener('place_changed', function() { 
 
    infowindow.close(); 
 
    marker.setVisible(false); 
 
    var place = autocomplete.getPlace(); 
 
    if (!place.geometry) { 
 
     window.alert("Autocomplete's returned place contains no geometry"); 
 
     return; 
 
    } 
 

 
    // If the place has a geometry, then present it on a map. 
 
    if (place.geometry.viewport) { 
 
     map.fitBounds(place.geometry.viewport); 
 
    } else { 
 
     map.setCenter(place.geometry.location); 
 
     map.setZoom(17); // Why 17? Because it looks good. 
 
    } 
 
    marker.setIcon(/** @type {google.maps.Icon} */({ 
 
     url: place.icon, 
 
     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(35, 35) 
 
    })); 
 
    marker.setPosition(place.geometry.location); 
 
    marker.setVisible(true); 
 

 
    var address = ''; 
 
    if (place.address_components) { 
 
     address = [ 
 
     (place.address_components[0] && place.address_components[0].short_name || ''), 
 
     (place.address_components[1] && place.address_components[1].short_name || ''), 
 
     (place.address_components[2] && place.address_components[2].short_name || '') 
 
     ].join(' '); 
 
    } 
 

 
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
 
    infowindow.open(map, marker); 
 
    }); 
 
}

 html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
.controls { 
 
    margin-top: 10px; 
 
    border: 1px solid transparent; 
 
    border-radius: 2px 0 0 2px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    height: 32px; 
 
    outline: none; 
 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
} 
 

 
#pac-input { 
 
    background-color: #fff; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    margin-left: 12px; 
 
    padding: 0 11px 0 13px; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
} 
 

 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
} 
 

 
.pac-container { 
 
    font-family: Roboto; 
 
}

<input id="pac-input" class="controls" type="text" 
 
     placeholder="Enter a location"> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initMap" 
 
     async defer></script>

我希望這有助於！

Answer 2

12. Maps API Standard Pricing Plan 12.1自由配額。該服務的某些部分提供給您不收費高達Maps API的文檔中描述的交易限額..

我想如果沒有限制的國家每天

25000下載： - 谷歌地圖的JavaScript API - 谷歌靜態地圖API - 每天谷歌街景圖像API

2500要求： - 谷歌地圖API路線 - 谷歌地圖派息矩陣孟清湘API 4 - 谷歌地圖API提升 - 谷歌地圖API地理編碼 - 谷歌地圖地理位置API - 谷歌地圖API的道路 - 谷歌地圖時區API

contact Sales如果需要更多..