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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

示例

＆＃13;
＆＃13;
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);
＆＃13;
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <div id="map" style="width: 640px; height: 480px;"></div>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: