我正在为我的项目使用google autocompete地址建议。现在我想只为澳大利亚显示地址建议。其他国家＆＃39;地址不应显示在Google地址建议中。
我的代码段：
HTML：
<input type="text" class="form-control" placeholder="Search" name="searchtxt" id="searchtxt" onFocus="initaddress('searchtxt')">
SCRIPT：
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.exp&libraries=places"></script>
<script src="<?php echo BASE_URL;?>media/user/js/map/map_autoload_lonlag.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function initialize() {
var input = document.getElementById('searchtxt');
var options = {
types: ['regions'],
componentRestrictions: {country: 'au'}
};
clearResults();
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
$(document).ready(function(){
initialize();
});
</script>
请建议我需要更改的内容。
答案 0 :(得分：-1)
请参阅以下链接可能有帮助
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Restricted to Multiple Countries</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#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: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
</style>
</head>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Countries
</div>
<div id="country-selector" class="pac-controls">
<input type="radio" name="type" id="changecountry-usa">
<label for="changecountry-usa">USA</label>
<input type="radio" name="type" id="changecountry-usa-and-uot" checked="checked">
<label for="changecountry-usa-and-uot">USA and unincorporated organized territories</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.064192, lng: -130.605469},
zoom: 3
});
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
var countries = document.getElementById('country-selector');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autocomplete = new google.maps.places.Autocomplete(input);
// Set initial restrict to the greater list of countries.
autocomplete.setComponentRestrictions(
{'country': ['us', 'pr', 'vi', 'gu', 'mp']});
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
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) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
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.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(' ');
}
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = address;
infowindow.open(map, marker);
});
// Sets a listener on a given radio button. The radio buttons specify
// the countries used to restrict the autocomplete search.
function setupClickListener(id, countries) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setComponentRestrictions({'country': countries});
});
}
setupClickListener('changecountry-usa', 'us');
setupClickListener(
'changecountry-usa-and-uot', ['us', 'pr', 'vi', 'gu', 'mp']);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>