Javascript 谷歌地图自动适应（自动居中和自动缩放）不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12350413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps auto-fit (auto center & autozoom) doesn't work
提问by Luke
I have a problem with a map on which I've used the fitBoundsmap methods, which should give the proper zoom and center the map giving it a latlon array. here's the code:
我在使用fitBounds地图方法的地图上遇到了问题，该方法应该提供适当的缩放比例并将地图居中并为其提供一个 latlon 数组。这是代码：
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<div id="map_canvas">
<script type="text/javascript">
var map;
var bounds = new google.maps.LatLngBounds(null);
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
<?php
foreach ($this->getProductCollection() as $_e):
$event = Mage::getModel('catalog/product')->load($_e->getId());
?>
var loc = new google.maps.LatLng("<?php echo $event->getEventLocationLatitude(); ?>","<?php echo $event->getEventLocationLongitude(); ?>");
bounds.extend(loc);
addMarker(loc, '<?php echo $event->getName(); ?>', "active");
bounds.extend(loc);
<?php endforeach; ?>
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function addMarker(location, name, active) {
var marker = new google.maps.Marker({
position: location,
map: map,
title: name,
status: active
});
}
jQuery.noConflict();
jQuery(document).ready(function(){
initialize();
});
</script>
The markers are correctly placed on the map, but I get the maximum zoom available:
标记正确放置在地图上，但我获得了可用的最大缩放：
Any help?
有什么帮助吗？
回答by Dziad Borowy
I've updated your fiddle here: http://jsfiddle.net/KwayW/1/
我在这里更新了你的小提琴：http: //jsfiddle.net/KwayW/1/
It works now as expected.
它现在按预期工作。
Here's the full code (save this as test.html and open in browser):
这是完整的代码（将其保存为 test.html 并在浏览器中打开）：
<style>#map_canvas { width:500px; height: 400px; }</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="map_canvas"></div>
<script>
var map;
var markersArray = [];
var image = 'img/';
var bounds = new google.maps.LatLngBounds();
var loc;
function init(){
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
loc = new google.maps.LatLng("45.478294","9.123949");
bounds.extend(loc);
addMarker(loc, 'Event A', "active");
loc = new google.maps.LatLng("50.83417876788752","4.298325777053833");
bounds.extend(loc);
addMarker(loc, 'Event B', "active");
loc = new google.maps.LatLng("41.3887035","2.1807378");
bounds.extend(loc);
addMarker(loc, 'Event C', "active");
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function addMarker(location, name, active) {
var marker = new google.maps.Marker({
position: location,
map: map,
title: name,
status: active
});
}
$(function(){ init(); });
</script>
