fitbounds() в API Google Maps V3 не соответствует границам

StackOverflow https://stackoverflow.com/questions/2494756

Вопрос

Я использую геокодер из Google API v3 для отображения карты страны.Я получаю рекомендуемую область просмотра для страны, но когда я хочу подогнать карту под эту область просмотра, это не работает (см. границы до и после вызова функции fitBounds в коде ниже).

Что я делаю не так?

Как я могу установить область просмотра моей карты на results[0].geometry.viewport?

var geocoder = new google.maps.Geocoder();
geocoder.geocode(
    {'address': '{{countrycode}}'},
    function(results, status) {
        var bounds = new google.maps.LatLngBounds();
        bounds = results[0].geometry.viewport;
        console.log(bounds);          // ((35.173, -12.524), (45.244, 5.098))
        console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503))
        map.fitBounds(bounds);               
        console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380))
    }
);
Это было полезно?

Решение

Это происходит потому, что fitBounds() необходимо привязаться к области просмотра, которая соответствует холсту карты, используя максимально возможный уровень масштабирования.С другой стороны, область просмотра, возвращаемая геокодером, не зависит от размера, компоновки или уровня масштабирования холста карты.Следовательно fitBounds() метод настраивает область просмотра карты для просмотра переданных LatLngBounds полностью в центре карты.

Вы можете проверить следующий пример для более наглядной демонстрации:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps fitBounds Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px"></div> 

   <script type="text/javascript"> 
      var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      var geocoder = new google.maps.Geocoder();

      geocoder.geocode({'address': 'RU'}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport);               

         var boundingBoxPoints = [
            ne, new google.maps.LatLng(ne.lat(), sw.lng()),
            sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
         ];

         var boundingBox = new google.maps.Polyline({
            path: boundingBoxPoints,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
         });

         boundingBox.setMap(map);
      }); 
   </script> 
</body> 
</html>

Ниже приведены несколько скриншотов для разных стран из приведенного выше примера.Красная ограничивающая рамка — это область просмотра, возвращаемая геокодером.Обратите внимание на разницу между ограничивающей рамкой и фактическим видовым экраном, скорректированную с помощью fitBounds():

Страна:НАС

US

Страна:RU

RU

Страна:ЭТО

IT

Другие советы

Просто чтобы вы знали, как это можно настроить, я подготовил образец того, что вы можете сделать, если предпочитаете потерять часть ограничивающего поля в области просмотра.

  • образец всего лишь fitBounds: http://jsbin.com/cakuhaca/1/edit

  • пример, когда вам все равно, что все окно просмотра видно, и всегда увеличиваете масштаб еще на один уровень: http://jsbin.com/rofupidi/1/edit

  • образец, когда вас волнует, только если полоса ограничивающей рамки, которую вы теряете, превышает X пикселей по горизонтали или вертикали http://jsbin.com/rezapuye/1/edit

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top