2016-11-09 79 views
0

我基本上想創建地圖,放大到對應於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> 

回答

0

你需要調用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>