API谷歌地图 - 自动完成

时间:2014-02-25 14:14:29

标签: api autocomplete maps

你好!

我的网站上有谷歌地图,带有自动填充输入文字。

我第一次点击自动填充列表中的地址时遇到问题,它放大了国外或不好的位置

如果我点击或再次输入,则会缩放正确的地址。

任何人都有解决方案吗?

这是我的代码:

//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
      });
    } 

}

0 个答案:

没有答案