Google 带有多个标记的地图自动居中

Question

我创建了一个地图来将我的搜索结果显示为地图上的标记，它几乎可以完美运行，但是自动 center/zoom 无法按需要运行。地图地址或动态所以我不能硬编码具体坐标。

我使用了之前中的一些代码和其他代码来使用 bounds 来尝试从 2 个标记获取坐标并找到中心，但是无论我做什么，它都无法正常工作。

这是我正在使用的代码 ---

<!--- SEARCH MAP --->
<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

<?php function getCoordinates($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "https://maps.googleapis.com/maps/api/geocode/json?address=$address&key=TOKEN_KEY";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
} ?>

<script type="text/javascript">

<?php
$locations = array();
//$location_query = new WP_Query( array(
//'posts_per_page' => 100
// ) );

echo "//markers: 100\n";
echo "var locations = [";
$comma = "";
//while ( $location_query->have_posts() ) {
//$location_query->the_post();

while (have_posts()) {
the_post();

$add = get_post_meta(get_the_ID(), 'address', true);
$property_pin = get_post_meta(get_the_ID(), 'pincode', true);
$terms = wp_get_post_terms(get_the_ID(), 'city');

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
if ($term->parent == 0) {
     $addy = getCoordinates($add, $term->name);  
     }
  }

}

$title = str_replace("'", "\'", get_the_title());
echo $comma . "['" . $title . "', " . $addy . ", " . get_the_id() . "]";  
$comma = ", ";
}
echo "];\n\n";

//info content
echo "var theinfo = [";
$comma2 = "";

while (have_posts()) {
the_post();

$add = get_post_meta(get_the_ID(), 'address', true);
$property_price = get_post_meta(get_the_ID(),'price',true);
$terms = wp_get_post_terms(get_the_ID(), 'city');

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
if ($term->parent == 0) { //check for parent terms only
     $tcity = $term->name;    
     }
  }

}

$title = str_replace("'", "\'", get_the_title());
$link = get_the_id();
$linkto = '<a href="/property/'.$link.'/">'.$title.'</a>';
$class = 'class="mapmarkers"';
echo $comma2 . "['<div ".$class."><h3>" . $linkto . "</h3><h4>" . $tcity . "</h4><p>$" . $property_price ."</p></div>']";  
$comma2 = ", ";
} 
echo "];\n\n";

?>

 var map;
   var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
minZoom: 5, 
maxZoom: 15,
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

// Info Window Content
    var infoWindowContent = theinfo;

 // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map 
    for( i = 0; i < locations.length; i++ ) {
        var position = new google.maps.LatLng(locations[i][1], locations[i][2]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: locations[i][0]
        });
//bounds.extend(position);
bounds.extend(marker.getPosition());

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

// Automatically center the map fitting all markers on the screen
 map.fitBounds(bounds);
 map.panToBounds(bounds); 
}

  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
       this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
   });
</script>

使用我的代码，地图呈现如下 ---

但我需要它更像这样---

示例仅使用 2 个标记，但实际数量和位置将是动态的。我该如何解决这个问题？

更新

我的坐标var locations = [['1460 Broadway', 40.7551055,-73.9862093, 2299], ['246 W 18th St', 40.741807,-74.0000351, 2114]];

Answer 1

TL;DR

对于给定的样本位置，以及您分享的代码，我无法重现问题：地图视图正确调整，以便位置可见。

现在怎么办？

验证程序中的位置数据。
- 经纬度值是否在预期范围内？ -> 纬度在 40.7 左右，经度在 -74 左右
- 经纬度值在位置数组中的顺序是否正确？ -> Lat 位于索引 1（如 locations[i][1]），lon 位于索引 2（如 locations[i][2]）
验证您的实际代码是否与 posted 代码匹配 -> 如果 posted 代码中缺少一些关键信息，我们可能正在调试错误的东西...
将您的问题更新为 Minimal, Complete, and Verifiable example
有关调试过程的更多详细信息，以及程序 JavaScript 部分的一些其他改进想法，请参见下文。

根据您 post 编辑的代码和示例 locations，我创建了这个最小的例子。与您的代码唯一重要的区别是这部分，注册回调以初始化地图：

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

在您的 posted 代码中看不到您是如何初始化地图的。无论如何，如果你初始化不正确，症状应该不是您屏幕截图中的地图，但根本没有地图，所以我想这不是你的问题。但我建议验证你的初始化。

请自己尝试这个例子，并在你的问题中确认你是否可以用它重现问题。如果你不能（我怀疑），那么为了帮助你，最好根据这个做Minimal, Complete, and Verifiable example

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map_canvas {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map_canvas"></div>
    <script>
function initMap() {
  var locations = [
    ['1460 Broadway', 40.7551055,-73.9862093, 2299],
    ['246 W 18th St', 40.741807,-74.0000351, 2114]
  ];
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 0,
    minZoom: 5, 
    maxZoom: 15,
    mapTypeId: 'roadmap'
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);

  // Info Window Content
  var infoWindowContent = locations;  // suitable dummy value

  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(), marker, i, position;

  // Loop through our array of markers & place each one on the map 
  for (i = 0; i < locations.length; i++) {
    position = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: locations[i][0]
    });
    bounds.extend(position);

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
      }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
    map.panToBounds(bounds); 
  }

  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
            async defer></script>
  </body>
</html>

这就是输出的样子：

不是很好，但是点在可见的中心，并且与我们在您的 post 中看到的非常不同。我真的认为你错过了一些重要的细节。

此时，可以进行一些简单的改进：

缩放级别 8 不太适合这些点，让我们放弃吧
- 因为这是 boundsListener 的唯一工作，我们也放弃它吧
- 请注意，boundsListener 从一开始似乎毫无意义，因为您已经调用了 map.fitBounds 和 map.panToBounds
我们可以将它移出循环，而不是为每个点都调用map.fitBounds和map.panToBounds，并在所有点都添加到bounds[=之后调用它83=]

根据以上建议，JavaScript部分代码变为：

function initMap() {
  var locations = [
    ['1460 Broadway', 40.7551055,-73.9862093, 2299],
    ['246 W 18th St', 40.741807,-74.0000351, 2114]
  ];
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 0,
    minZoom: 5, 
    maxZoom: 15,
    mapTypeId: 'roadmap'
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);

  // Info Window Content
  var infoWindowContent = locations;  // suitable dummy value

  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(), marker, i, position;

  // Loop through our array of markers & place each one on the map 
  for (i = 0; i < locations.length; i++) {
    position = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: locations[i][0]
    });
    bounds.extend(position);

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
      }
    })(marker, i));
  }

  // Automatically center the map fitting all markers on the screen
  map.fitBounds(bounds);
  map.panToBounds(bounds); 
}

输出变为：

根据您目前提供的信息，我只能得到这些信息。而且我没发现问题。

希望以上内容对你的调试有所帮助，或者基于此您将 post 一个 Minimal, Complete, and Verifiable example 将帮助其他人找到您的问题。

Answer 2

我解决了这个问题，最外层的地图容器（未在问题中显示）设置为在页面加载时显示 none 以便我可以使用单击功能在地图视图和常规视图之间切换帖子的列表视图。

所以我有--

    <div id="map_view" style="display:none;">
    <div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
    </div>
<script> blah blah </script>
</div>

如果我取消显示 none，它似乎会在页面加载时正确加载。理想情况下，我不希望首先显示地图，但这似乎是迄今为止唯一的解决方案。

Answer 3

这可能对某些人有所帮助。如果您需要在标记周围添加波纹，您可以这样做。您可以根据您的要求为所有或部分标记添加波纹。

    <!DOCTYPE html>
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
   <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 1000px; height: 500px;"></div>

   <script type="text/javascript">
     var locations = [
     ['Saudi Arabia',23.885942, 45.079162   , 6],
      ['United Arab Emirates', 23.424076, 53.847818, 4],
      ['Bahrain',25.930414  ,50.637772  , 5],
      ['Iraq',  33.223191,  43.679291   , 3],
      ['Kuwait',29.31166,   47.481766   , 2],     
      ['Qatar',25.354826,   51.183884   , 1]
    ];

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

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

    var marker, i;

    var icon = {
                url: "Ripple.svg", // url of ripple svg image
                scaledSize: new google.maps.Size(200, 200), // scaled size
                origin: new google.maps.Point(0,0), // origin
                anchor: new google.maps.Point(100,100) // anchor
            };        

  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, 
         icon: icon,
            optimized: false
      });

       google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(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));
    }


  </script>
</body>
</html>

]3

Google 带有多个标记的地图自动居中

Google map autocenter with multiple markers

javascript

maps

jquery

google-maps

google-maps-markers

TL;DR