Google Maps JavaScript API - автоматизировать масштабирование?

Я работаю с несколькими маркерами карты. В настоящее время я использую map.fitBounds(bounds); в своем JavaScript для изменения размера карты. bounds содержит несколько LatLng объектов.

Что я делаю неправильно? Потому что он слишком далеко приближается :-(

введите описание изображения здесь

Исходный код JavaScript

var geocoder, map;
$(document).ready(function(){
    var coll_gmap = $(".gmap");
    if ( coll_gmap.length != 0 )
    {
        //initiate map
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 13,
            center: latlng,
           mapTypeControl: true,
            navigationControl: true,
            scaleControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var bounds = new google.maps.LatLngBounds();
        //loop all addressen + insert into map
          map = new google.maps.Map(coll_gmap[0], myOptions);
        coll_gmap.each(function(index)
        {
             if (geocoder) {
                    geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            bounds.extend(results[0].geometry.location);

                            var marker = new google.maps.Marker({
                                map: map, 
                                position: results[0].geometry.location
                            });
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }//end if status
                    }); //end if geocoder.geocode
                } //end if geocoder   

        }) //end coll_gmap each
        map.fitBounds(bounds);

        }//end if coll_gmap length
       /* console.log("Script created by NicoJuicy");*/   
}); //end onload

Источник HTML

<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>

javascript google-maps-api-3 zooming bounds
person NicoJuicy    schedule 14.07.2010    source источник

Ответы (5)


arrow_upward
13
arrow_downward

Метод fitBounds() должен работать. Однако обратите внимание, что он всегда сохраняет некоторые отступы на размерах карты. Рассмотрим следующий пример:

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

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

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

      var points = [
        new google.maps.LatLng(51.22, 4.40),
        new google.maps.LatLng(50.94, 3.13)
      ];

      // Extend bounds with each point
      for (var i = 0; i < points.length; i++) {
        bounds.extend(points[i]);
        new google.maps.Marker({position: points[i], map: map});
      }

      // Apply fitBounds
      map.fitBounds(bounds);  

      // Draw the bounds rectangle on the map
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();

      var boundingBox = new google.maps.Polyline({
        path: [
          ne, new google.maps.LatLng(ne.lat(), sw.lng()),
          sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
        ],
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

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

Снимок экрана из приведенного выше примера:

Карты Google fitBounds Padding

Красная ограничивающая рамка представляет объект LatLngBounds, если он расширен обоими маркерами. Обратите внимание, что холст карты имеет 543px ширину, а также обратите внимание на поля заполнения слева и справа от ограничивающей рамки.

Теперь, если мы уменьшим ширину холста карты всего на 1px, используя 542px, метод fitBounds() перейдет на более низкий уровень масштабирования:

Google Maps fitBounds Padding

person Daniel Vassallo    schedule 14.07.2010
comment
Хорошая реакция. Тем не менее, я должен задаться вопросом, если вы заметили мой скриншот, мои маркеры не посередине, а больше в левой половине. Так что что-то еще должно быть не так, зум не приближается, когда я регулирую ширину ... - person NicoJuicy; 15.07.2010
comment
@NicoJuicy: Можно ли обновить свой вопрос полным примером, который воспроизводит вашу проблему? Я попытался разместить маркеры в том же месте, что и ваш, и fitBounds(), похоже, работает намного лучше на моих снимках экрана. - person Daniel Vassallo; 15.07.2010

arrow_upward
5
arrow_downward

Я попал сюда, используя ссылку «По теме» справа, и я думаю, что ответ на вашу проблему такой же, как и на предыдущий вопрос. :п

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

map.fitBounds(bounds);

с участием

var listener = google.maps.event.addListener(map, "idle", function() { 
               map.fitBounds(bounds);
               google.maps.event.removeListener(listener); });

Удачи.

person LGT    schedule 03.11.2010

arrow_upward
1
arrow_downward

Просто используйте функцию setZoom.

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': zipcode }, function(results, status)
{
    if (status == google.maps.GeocoderStatus.OK)
    {
        map.setCenter(results[0].geometry.location);
        map.setZoom(12);
    }
    else
    {
        alert(zipcode + " not found" + "\nstatus : " + status);
    }
});
person VRC    schedule 03.12.2012

arrow_upward
0
arrow_downward

Я нашел решение.

Вместо того, чтобы делать сингл

bounds.extend(myLatLng)

Каждый раз, когда вы добавляете myLatLng в свои границы, выполняйте следующие действия

bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

Надеюсь, это кому-нибудь поможет!

person NicoJuicy    schedule 16.07.2010

arrow_upward

arrow_downward

person    schedule
comment
Добро пожаловать в SO. Ваш вклад всегда приветствуется, но обычно некоторые аннотации тоже хороши - person YakovL; 21.10.2016