带有多个标记的Google地图自动中心
带有多个标记的Google地图自动中心
提问于 2017-11-29 17:59:51
我创建了一张地图，将我的搜索结果显示为地图上的标记，它几乎是完美的，但是自动中心/缩放并不能按需要工作。地图地址或动态，所以我不能硬编码特定的坐标。
我使用了以前的问题中的一些代码和其他代码来使用界尝试从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>用我的代码，地图是这样绘制的--
但我需要它更像这样.
示例只使用两个标记，但实际数量和位置将是动态的。我怎么才能解决这个问题？
更新
我的坐标var locations = [['1460 Broadway', 40.7551055,-73.9862093, 2299], ['246 W 18th St', 40.741807,-74.0000351, 2114]];
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-12-03 16:37:42
我发现了这个问题，将最外层的地图容器(在问题中没有显示)设置为在页面加载时不显示任何，这样我就可以使用单击函数在map视图和常规的posts列表视图之间切换。
所以我.
<div id="map_view" style="display:none;">
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<script> blah blah </script>
</div>如果我不显示任何显示，它似乎正确地加载在页面加载。理想情况下，我不希望首先显示地图，但这似乎是迄今为止唯一的解决方案。
Stack Overflow用户
发布于 2017-12-03 06:24:10
TL;DR
对于给定的示例位置和您共享的代码，我无法重现问题:地图视图将正确调整以使位置可见。
现在怎么办？
- 验证程序中的位置数据。
- Are the lat-lon values in the expected range? -> Lat at around 40.7 and lon at around -74
- Are the lat-lon values in the correct order in the locations arrays? -> Lat is at index 1 (as in `locations[i][1]`) and lon is at index 2 (as in `locations[i][2]`)
- 验证您的实际代码是否与已发布的代码->真正匹配，如果发布的代码中缺少一些关键信息，我们可能正在调试错误的东西.
- 将您的问题更新为最小、完整和可验证的示例
- 有关调试过程的更多细节，以及程序的JavaScript部分的一些其他改进想法，请参见下面。
基于您发布的代码和示例locations，我创建了这个最小的示例。与您的代码唯一重要的区别是这个部分，注册一个回调来初始化映射：
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>在您发布的代码中看不到如何初始化地图。在任何情况下，如果你初始化错误，症状应该不是你的屏幕截图中的地图，而是根本没有地图，所以我想这不是你的问题。但我建议验证一下你的初始化。
请自己尝试这个例子，并在你的问题中确认，如果你能重现它的问题。如果您不能(如我所怀疑的那样)，那么为了帮助您，最好是基于此来创建最小、完整和可验证的示例。
<!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);
}输出结果如下：
到目前为止，我只能从你提供的信息中了解到这一点。我看不出有什么问题。
我希望上面的内容将有助于您的调试，或者在此基础上您将发布一个最小、完整和可验证的示例，以帮助其他人发现您的问题。
Stack Overflow用户
发布于 2017-12-05 12:09:27
也许这能帮到一个人。如果您需要在您的标记周围添加一个涟漪，您可以这样做。您可以根据您的需求为所有或部分标记添加波纹。
<!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.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47558974
复制相关文章
相似问题
腾讯云开发者
