Question

这是我的地方自动填充和搜索代码。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places">
 </script>
 <script>
 var geocoder;
 var map;
 function initialize() {

 var input = document.getElementById('address');
 var options = {

  componentRestrictions: {country: "in"}
 };
var autocomplete = new google.maps.places.Autocomplete(input,options);
geocoder = new google.maps.Geocoder();


//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);

 var mapOptions = {
 zoom: 15,
 //center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP,

 }

 map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

 }



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);
  var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
  });
} else {
  alert('Geocode was not successful for the following reason: ' + status);
}
 });
 }


 google.maps.event.addDomListener(window, 'load', initialize);
 </script>

这是我的HTML代码。

  <input id="address" type="textbox" size="30">
  <input type="button" value="Search" onclick="codeAddress()">

工作正常，但我不想让用户点击按钮。当出现建议时，当用户选择任何建议选项时，地图将必须导航到该位置。我该怎么做呢？？？

当用户从下拉列表中选择任何选项时，地图应该导航到该位置。

Answer 1

查看this example以及place_changed事件的实施情况。

var place = autocomplete.getPlace();

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

这样您就可以将地图平移到自动完成结果的位置。

Answer 2

这是我的工作代码..

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places">  
</script>
<script>
var geocoder;
var map;
function initialize() {

var input = document.getElementById('address');
var options = {

componentRestrictions: {country: "in"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
geocoder = new google.maps.Geocoder();


 //var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);

 var mapOptions = {
 zoom: 15,
 //center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP,

 }

map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
 });
google.maps.event.addListener(autocomplete, 'place_changed', function() {

infowindow.close();

marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
  return;
 }

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


});

}



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);
  var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
  });
 } else {
  alert('Geocode was not successful for the following reason: ' + status);
 }
 });
}


google.maps.event.addDomListener(window, 'load', initialize);

</script>

现在，用户可以从下拉列表中选择选项，地图将导航到该位置。并在搜索按钮上单击。

Answer 3

希望这可以帮助您

function initialize(){

var mapOptions = {//Map Properties
  zoom:12,
  center: Bangalore
};

googleMap = new google.maps.Map(document.getElementById('map-holder'),mapOptions);//map-holder is a div which holds map in my html

var defaultBounds = new google.maps.LatLngBounds(//bounds for Bengaluru
    new google.maps.LatLng(12.7342888,77.3791981),
    new google.maps.LatLng(13.173706,77.8826809)
);

googleMap.fitBounds(defaultBounds);

var input = (document.getElementById('searchInput'));//search input element
googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);//binding it to map

var searchBox = new google.maps.places.SearchBox((input));

google.maps.event.addListener(searchBox, 'places_changed', function() {//triggers when search is performed

    var places = searchBox.getPlaces();

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

    var bounds = new google.maps.LatLngBounds();

    for (var i = 0, place; place = places[i]; i++) {
       bounds.extend(place.geometry.location);
       //googleMap.fitBounds(place.geometry.viewport);
    }
    googleMap.fitBounds(bounds);
});

google.maps.event.addListener(googleMap, 'bounds_changed', function() {
    var bounds = googleMap.getBounds();
    searchBox.setBounds(bounds);
})
}

实施Google地方自动填充功能

3 个答案: