Question

添加自动缩放和自动居中Google群集地图的最佳方法是什么？目前，中心和缩放是硬编码的，与动态生成的标记冲突。

<<div id="map"></div>
<script>

  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: -28.024, lng: 140.887}
    });

    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
    {lat: -31.563910, lng: 147.154312},
    {lat: -33.718234, lng: 150.363181},
    {lat: -33.727111, lng: 150.371124},
    {lat: -33.848588, lng: 151.209834},
    {lat: -33.851702, lng: 151.216968},
    {lat: -34.671264, lng: 150.863657},
    {lat: -35.304724, lng: 148.662905},
    {lat: -36.817685, lng: 175.699196},
    {lat: -36.828611, lng: 175.790222},
    {lat: -37.750000, lng: 145.116667},
    {lat: -37.759859, lng: 145.128708},
    {lat: -37.765015, lng: 145.133858},
    {lat: -43.999792, lng: 170.463352}
  ]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Answer 1

将标记位置添加到google.maps.LatLngBounds对象，然后使用生成的边界调用map.fitBounds()。

var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
  bounds.extend(location);
  map.fitBounds(bounds);
  //  ...

proof of concept fiddle

代码段

＆＃13;

 function initMap() {

   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 3,
     center: {
       lat: -28.024,
       lng: 140.887
     }
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
   var bounds = new google.maps.LatLngBounds();
   var markers = locations.map(function(location, i) {
     bounds.extend(location);
     map.fitBounds(bounds);
     return new google.maps.Marker({
       position: location,
       label: labels[i % labels.length]
     });
   });

   // Add a marker clusterer to manage the markers.
   var markerCluster = new MarkerClusterer(map, markers, {
     imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
   });
 }
 var locations = [{
   lat: -31.563910,
   lng: 147.154312
 }, {
   lat: -33.718234,
   lng: 150.363181
 }, {
   lat: -33.727111,
   lng: 150.371124
 }, {
   lat: -33.848588,
   lng: 151.209834
 }, {
   lat: -33.851702,
   lng: 151.216968
 }, {
   lat: -34.671264,
   lng: 150.863657
 }, {
   lat: -35.304724,
   lng: 148.662905
 }, {
   lat: -36.817685,
   lng: 175.699196
 }, {
   lat: -36.828611,
   lng: 175.790222
 }, {
   lat: -37.750000,
   lng: 145.116667
 }, {
   lat: -37.759859,
   lng: 145.128708
 }, {
   lat: -37.765015,
   lng: 145.133858
 }, {
   lat: -43.999792,
   lng: 170.463352
 }]
 google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>

＆＃13;

用于Google地图的Autozoom和自动中心Clustermap

1 个答案: