谷歌地图 API 中心和缩放多个标记

Question

我知道有很多关于这个主题的问题得到了解答，但我无法让它们与我的代码一起工作。我使用了来自 this question here 的代码，但我的 javascript 知识有限，我无法弄清楚将它放在哪里才能让它工作。我正在使用从 wp 查询动态添加的多个位置，并且我希望地图能够自动找到所有位置的中心，并最好缩放到所有标记的范围。

这是我生成地图的代码：

var map = new google.maps.Map(document.getElementById('map-result'), {
              zoom: 6,
              center: new google.maps.LatLng(52.999085, -2.833751),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        var locations = [
        <?php
        $post_query = new WP_Query(array('posts_per_page' => 999, 'post_type' => 'surf-school', 'category_name' => $cat_name));
            if(!empty($post_query->posts)){

            foreach($post_query->posts as $post) { 
                $location_lat = get_post_meta($post->ID,'wp_gp_latitude',true);
                $location_long = get_post_meta($post->ID,'wp_gp_longitude',true);
                $the_post_type = get_post_type( get_the_ID() );

            ?>
                ['<a href="<?php the_permalink();?>"><?php the_title(); ?></a>', <?php echo $location_lat; ?>, <?php echo $location_long; ?>, '<?php echo home_url().'/wp-content/themes/blutek/images/beach-marker.png'; ?>'],

            <?php } }?>
        ];

        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]),
            icon: locations[i][3],
            map: map
          });

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

这是来自the other answer 的代码，它应该使地图居中：

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

for (i = 0; i < locations.length; i++) {
  bound.extend( new google.maps.LatLng(locations[i][2], locations[i][3]) );

  // OTHER CODE
}
console.log( bound.getCenter() 
);

谁能告诉我该代码应该放在我的代码中的什么位置？

Answer 1

您需要完全按照your referenced question 中的建议进行操作：

首先，您可以通过包含所有动态生成的位置来创建一个 LatLngBounds 对象。使用 extend 方法包含点。

然后使用map.fitBounds方法将地图居中并缩放到标记上

proof of concept fiddle

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

var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][3],
        map: map
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
map.fitBounds(bounds);

代码 sn-p：

var map = new google.maps.Map(document.getElementById('map-result'), {
  zoom: 6,
  center: new google.maps.LatLng(52.999085, -2.833751),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var locations = [
  ['title', 42, -72, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Bondi Beach', -33.890542, 151.274856, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Coogee Beach', -33.923036, 151.259052, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Cronulla Beach', -34.028249, 151.157507, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Maroubra Beach', -33.950198, 151.259302, 'http://maps.google.com/mapfiles/ms/micons/blue.png']
];
var infowindow = new google.maps.InfoWindow();

var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][3],
    map: map
  });
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
map.fitBounds(bounds);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-result"></div>

Answer 2

使用fitBounds函数：

var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
    bounds.extend(new google.maps.LatLng(locations[i][1], locations[i][2])); 
    //the remaining code for initializing markers goes here...        
}
map.fitBounds(bounds);  //Sets the viewport to contain the given bounds

示例

function initialize() {


    var locations = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < locations.length; i++) {
        bounds.extend(new google.maps.LatLng(locations[i][1], locations[i][2]));
        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));
    }

    map.fitBounds(bounds);    
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 640px; height: 480px;"></div>