Масштабирование и центрирование геокодированного места с помощью google maps api

Я работаю с API карт Google для одного из моих приложений. У меня есть текстовое поле, в которое пользователь вводит название места. Он должен геокодировать имя места пользователя, указанное в текстовом поле, и масштабировать и центрировать это геокодированное название места. Я преуспеваю в геокодировании, но масштабирование и центрирование не такие, как ожидалось. Предоставляются код и выходной снимок. Черный прямоугольник на изображении — это название места, которое было геокодировано на основе ввода пользователя в текстовое поле. А вот масштабирование и центрирование находится где-то в углу карты. Я хочу, чтобы геокодированное название места было в центре карты.

var mapProp = {
  center: x,
  zoom: 4,
  disableDefaultUI: true,
  mapTypeId: layer,
  mapTypeControlOptions: {
    mapTypeIds: [layer]
  }
};
var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));

geocoder.geocode({
  'address': place_name_filter
}, function(results, status) {
  if (status === google.maps.GeocoderStatus.OK) {
    map.fitBounds(results[0].geometry.viewport);
  } else {
    alert(place_name_filter + " not found");
    console.log("status : ", status);
  }
});

Place_name_filter — это переменная, которая содержит название места, введенное в текстовое поле. Output_Snapshot_for_the_above_code

Ожидаемый_выход


google-maps google-maps-api-3 geocoding centering zooming
person harnish    schedule 09.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы приблизиться к результату геокодера, используйте map.fitBounds и .geometry.viewport (или geometry.bounds) LatLngBounds в ответе.

фрагмент кода:

function initialize() {
  var mapProp = {
    center: {
      lat: 25,
      lng: -90
    },
    zoom: 4,
  };
  var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
  var geocoder = new google.maps.Geocoder();
  var bounds = new google.maps.LatLngBounds();
  var place_name_filter = "Abilene, TX";
  geocoder.geocode({
    'address': place_name_filter
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert(place_name_filter + " not found");
      console.log("status : ", status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googlemaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googlemaps"></div>

person geocodezip    schedule 09.12.2015
comment
Я отредактировал свой код и прикрепил снимки отредактированного кода. - person harnish; 09.12.2015