带有多个标记的谷歌地图自动中心
Posted
技术标签:
【中文标题】带有多个标记的谷歌地图自动中心【英文标题】：Google map autocenter with multiple markers 【发布时间】：2018-05-13 12:39:35 【问题描述】：我创建了一个地图以将我的搜索结果显示为地图上的标记，它几乎可以完美运行，但是自动居中/缩放功能无法按需要工作。地图地址还是动态的，所以我不能硬编码特定的坐标。
我使用了之前 question 中的一些代码和其他代码来使用 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]];
【问题讨论】：
您是否尝试将map.fitBounds(bounds); 移出for 循环？
@xomena 刚试了，什么也没做。
我收到一个带有已发布代码的 javascript 错误：Uncaught ReferenceError: theinfo is not defined。如果我修复它正确居中（缩放级别为 8）。 fiddle
我猜是数据问题，您提供的坐标是否为您重现了问题？
@geocodezip "theinfo" 已在我的代码中定义。
【参考方案1】：
TL;DR
使用给定的样本位置， 以及您分享的代码， 我无法重现该问题： 地图视图会正确调整，以便位置可见。
现在呢？
验证程序中的位置数据。
经纬度值是否在预期范围内？ -> 纬度在 40.7 左右，经度在 -74 左右 位置数组中的经纬度值的顺序是否正确？ -> Lat 位于索引 1（如locations[i][1]），lon 位于索引 2（如 locations[i][2]）
验证您的实际代码是否与发布的代码真正匹配 -> 如果发布的代码中缺少某些关键信息，我们可能正在调试错误的东西...
将您的问题更新为Minimal, Complete, and Verifiable example
有关调试过程的更多详细信息，以及对程序的 JavaScript 部分的一些其他改进想法，请参见下文。
根据您发布的代码和示例locations，
我创建了这个最小的例子。
与您的代码唯一重要的区别是这部分，
注册一个回调来初始化地图：
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
在您发布的代码中看不到您如何初始化地图。 无论如何，如果你初始化不正确， 症状应该不是屏幕截图中的地图，而是根本没有地图， 所以我想这不是你的问题。 但我建议验证您的初始化。
请自己尝试这个例子，并在你的问题中确认你是否可以用它重现问题。 如果你不能（我怀疑）， 那么为了帮助你， 最好在此基础上制作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>
这是输出的样子：
这不是很好，但点在可见的中心， 与我们在您的帖子中看到的非常不同。 我真的认为你错过了一些重要的细节。
在这一点上，一些简单的改进是可能的：
缩放级别 8 不太适合这些点，让我们放弃它 既然这是boundsListener 的唯一工作，我们也放弃它吧
请注意，boundsListener 从一开始就似乎毫无意义，因为您已经调用了map.fitBounds 和map.panToBounds
不用为每个点调用map.fitBounds 和map.panToBounds，我们可以将其移出循环，在所有点都添加到bounds 后调用它
根据以上建议，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);
然后输出变成：
据我所知，这是您目前提供的信息。 而且我看不出有什么问题。
希望以上内容对您的调试有所帮助， 或者基于此，您将发布Minimal, Complete, and Verifiable example，以帮助其他人找到您的问题。
【讨论】：
【参考方案2】：我发现了这个问题，最外面的地图容器（未在问题中显示）设置为在页面加载时不显示，以便我可以使用单击功能在地图视图和帖子的常规列表视图之间切换。
所以我有--
<div id="map_view" style="display:none;">
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<script> blah blah </script>
</div>
如果我取消显示无，它似乎在页面加载时正确加载。理想情况下，我不希望首先显示地图，但这似乎是迄今为止唯一的解决方案。
【讨论】：
如果有人知道仍然允许在页面加载时隐藏地图的解决方案，请告诉我。【参考方案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
【讨论】：
@RichJ 我提到它可能会帮助某人，以防他们需要添加一些这样的逻辑。在您的情况下，我认为您可以使用这行代码来关注您的任何标记。在这里，我对 lat long 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 );以上是关于带有多个标记的谷歌地图自动中心的主要内容，如果未能解决你的问题，请参考以下文章