你好!
我的网站上有谷歌地图,带有自动填充输入文字。
我第一次点击自动填充列表中的地址时遇到问题,它放大了国外或不好的位置
如果我点击或再次输入,则会缩放正确的地址。
任何人都有解决方案吗?
这是我的代码:
//déclaration des variables
var geocoder;
var map;
var marqueurs = []; //Tableau contenant les marqueurs
var fenetres = []; //Tableau contenant les fenêtres d'informations
/*
* Fonction initialize()
* Initialise la carte Google Maps
* Centrée sur Paris
*/
function initialize() {
//latitude/longitude paris
var latlng = new google.maps.LatLng(48.8566140, 2.3522219);
//on relie l'autocomplete a notre input
var input = document.getElementById('address');
//// Restrict the search to the default country
var countryRestrict = { 'country': 'fr' }
//options de la carte google
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Turns an address into a latitude/longitude coordinate using the Geocoder, and displays it as a marker on the map.
geocoder = new google.maps.Geocoder();
var options = {
types: ['geocode'],
componentRestrictions: countryRestrict
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
places = new google.maps.places.PlacesService(map);
autocomplete = new google.maps.places.Autocomplete(input, options);
// Add a DOM event listener to react when the user selects a country.
google.maps.event.addDomListener(document.getElementById('address'), 'change', codeAddress);
//
google.maps.event.addListener(map, 'click', function(event) { addMarker(event.latLng); });
//génération de la liste des magasins
listeMagasins();
}
/*
* Fonction codeAddress()
* Fait fonctionner la barre de recherche
*/
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location); map.setZoom(17);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
/*
* Fonction event(int)
* Crée l'évènement d'apparition d'une fenêtre d'info
* quand on clique sur un marqueur
*/
function event(j) {
google.maps.event.addListener(marqueurs[j], 'click', function() {
fenetres[j].open(map,marqueurs[j]);
});
}
编辑:
解决方案:
function initialize() {
[...]
//// Restrict the search to the default country
var countryRestrict = { 'country': l }
//options de l'autocomplete
var options = {
//bounds: defaultBounds,
types: ['geocode'],
componentRestrictions: countryRestrict
};
//on relie l'autocomplete a notre input
var input = document.getElementById('address');
autocomplete = new google.maps.places.Autocomplete(input, options);
var place = autocomplete.getPlace();
// Add a event listener to react when the user selects a country.
google.maps.event.addListener(autocomplete, 'place_changed', codeAddress) ;
[...]
}
function codeAddress() {
var place = autocomplete.getPlace();
if (!place.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.
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
}
}