Google Maps API v3中包含多个标记的自动中心地图 [英] Auto-center map with multiple markers in Google Maps API v3

问题描述

 < script>这是我用来显示带3个针脚/标记的地图的地图。 
函数initialize（）{
 var locations = [
 ['DESCRIPTION'，41.926979,12.517385,3]，
 ['DESCRIPTION'，41.914873,12.506486,2]，
 ['DESCRIPTION'，41.918574,12.507201，1] 
]; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：15，
 center：new google.maps.LatLng（41.923 ，12.513），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
 
 
 
函数loadScript（）{
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'+'callback = initialize'; 
 document.body.appendChild（script）; 
} 
 
 window.onload = loadScript; 
< / script> 
 
< div id =mapstyle =width：900px; height：700px;>< / div> 
  

我正在寻找的方法是避免必须手动找到带有中心的地图：new google.maps.LatLng（41.923,12.513）。有没有一种方法可以自动让地图在三个坐标上居中？

解决方案

有一种更简单的方法， code> LatLngBounds ，而不是从两个点明确创建一个。 （有关详情，请参阅此问题）

应该看起来像这样，添加到代码中：

  //创建空的LatLngBounds对象
 var bounds = new google.maps.LatLngBounds（）; 
 var infowindow = new google.maps.InfoWindow（）; 
 
 for（i = 0; i< locations.length; i ++）{
 var marker = new google.maps.Marker（{
 position：new google.maps。 LatLng（位置[i] [1]，位置[i] [2]），
 map：map 
}）; 
 
 //扩展边界以包含每个标记的位置
 bounds.extend（marker.position）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
 
 //现在将地图放入新包含的边界
 map.fitBounds（bounds）; 
 
（可选）在地图缩放后恢复缩放级别
 var listener = google.maps.event.addListener（map，idle，function（）{
 map.setZoom（3）; 
 google.maps.event.removeListener（listener）; 
}）; 
  

这样，您可以使用任意数量的点，并且不需要知道订单预先。

演示jsFiddle here： http://jsfiddle.net / x5R63 /

This is what I use to display a map with 3 pins/markers:

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

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

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

<div id="map" style="width: 900px; height: 700px;"></div>

What I’m looking for is a way to avoid having to "manually" find the center of the map with center: new google.maps.LatLng(41.923, 12.513). Is there a way to automatically have the map centered on the three coordinates?

解决方案

There's an easier way, by extending an empty LatLngBounds rather than creating one explicitly from two points. (See this question for more details)

Should look something like this, added to your code:

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

This way, you can use an arbitrary number of points, and don't need to know the order beforehand.

Demo jsFiddle here: http://jsfiddle.net/x5R63/

这篇关于Google Maps API v3中包含多个标记的自动中心地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！