javascript - Google map API 中心和缩放多个标记

Question

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

这是我生成 map 的代码:

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 的代码这应该使 map 居中:

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 中的建议进行操作:

First you can create a LatLngBounds object by including all the dynamically generated locations. Use the extend method to include the points.

然后使用map.fitBounds方法在标记上居中和缩放 map

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);

代码片段:

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>