制作我的谷歌地图fitBounds

问题描述:

我基本上想创建地图,放大到对应于SE-NW角落的大小。我已经尝试了很多变体,但一直未能实现。我设法在我的脚本的一个版本上放置两个标记,但无法使地图放大到标记的大小。我不需要标记,我只是在箱子外面思考。我将在下面列出我的工作脚本,但希望能够使fitBounds正常工作。我已经在这方面工作了两天,但我不是程序员,我在本网站上找到了很多解决方案,其他人也不太合理,或者他们没有解决我确切的问题。制作我的谷歌地图fitBounds

<!DOCTYPE html> 
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates --> 
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand --> 
<html> 
<head> 
<title>Google Road Maps</title> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(56.3,4.3), 
    zoom:8, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI:true,  
    scaleControl: true 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

var fitBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(53.3,-0.7), 
    new google.maps.LatLng(59.3,9.3) 
); 
</script> 
</head> 
<body> 
<div id="googleMap" style="width:600mm;height:600mm;"></div> 
</body> 
</html> 

你需要调用Map.fitBoundsfitBounds对象。

map.fitBounds(fitBounds); 

proof of concept fiddle

代码片断:

function initialize() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(56.3, 4.3), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    scaleControl: true 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    map.fitBounds(fitBounds); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var fitBounds = new google.maps.LatLngBounds(
 
    new google.maps.LatLng(53.3, -0.7), 
 
    new google.maps.LatLng(59.3, 9.3) 
 
);
html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>