【发布时间】：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" 已在我的代码中定义。
标签： javascript jquery google-maps maps google-maps-markers