Google地图缩放适合 [英] Google Map Zoom To Fit

问题描述

我使用集群标记示例开发了一个使用来自数据库的地理坐标的地图。我试图通过使用 LatLngBounds（）;

 < script type =text / javascript> 
函数initialize（）{
 var center = new google.maps.LatLng（9.4419，9.1419）; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：2，
 center：center，
 mapTypeId： google.maps.MapTypeId.ROADMAP 
}）; 
 
 var markers = []; 
 //为boucle创建infowindow 
 var infoWindow = new google.maps.InfoWindow; 
 var bounds = new google.maps.LatLngBounds（）; 
 
 for（var i = 0; i< latlng.length; i ++）{
 
 var latLng = new google.maps.LatLng（latlng.lat，latlng.lng ）; 
 
 var html ='test show in infowondow'; 
 
 var marker = new google.maps.Marker（{
 position：latLng，
 map：map，
 icon：/ img / icon1.jpg， 
 title：test title，
}）; 
 //调用函数.... 
 bindInfoWindow（marker，map，infoWindow，html）; 
 markers.push（marker）; 
 
} 
 
 var markerCluster = new MarkerClusterer（map，markers）; 
} 
 
 //创建一个函数bindInfoWindow 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener （marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
} 
 
 var markerCluster = new MarkerClusterer（map，markers）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  

解决方案

google.maps.LatLng（latlng.lat，latlng.lng）;

编辑：正如Marcelo指出的out改变为：


var latLng = new google.maps.LatLng（latlng [i] .lat，latlng [i ] .lng）;



add：


bounds.extend（latLng）


• 之后


var markerCluster = new MarkerClusterer（map，markers）;


add：


map.fitBounds（bounds）;


I have developed a map that uses a geo-coordinate from a database using a cluster marker example. I have tried to make it zoom automaticly by using LatLngBounds();

 <script type="text/javascript">
     function initialize() {
            var center = new google.maps.LatLng(9.4419, 9.1419);

            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 2,
              center: center,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var markers = [];
            // create the infowindow out of the for boucle
            var infoWindow = new google.maps.InfoWindow;
            var bounds = new google.maps.LatLngBounds();

for ( var i = 0; i < latlng.length; i++ ) {

      var latLng = new google.maps.LatLng(latlng.lat,latlng.lng);   

     var html = 'test show in infowondow';

    var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon:"/img/icon1.jpg",
            title:"test title",
        });
    // call to the function....
    bindInfoWindow(marker, map, infoWindow, html);
    markers.push(marker);

  }     

            var markerCluster = new MarkerClusterer(map, markers);
          }

    // create a function bindInfoWindow

    function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
    }

            var markerCluster = new MarkerClusterer(map, markers);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>

解决方案

• make bounds global.
• then after

var latLng = new google.maps.LatLng(latlng.lat,latlng.lng);


EDIT: and as Marcelo pointed out change this to:

var latLng = new google.maps.LatLng(latlng[i].lat,latlng[i].lng);


add:

bounds.extend(latLng)

• after

var markerCluster = new MarkerClusterer(map, markers);

add:

map.fitBounds(bounds);

这篇关于Google地图缩放适合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！