2011-01-07 77 views
7

我試圖重新鍋限制行爲表現出在這裏: http://econym.org.uk/gmap/example_range.htm谷歌地圖:限制平移

不幸的是,它使用的API版本2,而不是目前的版本3.我更新的命令所以,他們是最新的,但我想我可能會錯過一些東西,因爲它不工作:

<html> 
<body> 
<script type="text/javascript" src="http://meyouand.us/scripts/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

// Generate map 
var latlng = new google.maps.LatLng(37.76201, -122.4375); 
var myOptions = { zoom: 12, center: latlng, panControl: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.TERRAIN }; 
var map = new google.maps.Map(document.getElementById("gmap"), myOptions); 

// Limit panning 

// The allowed region which the whole map must be within 
var southWest = new google.maps.LatLng(37.684, -122.591); 
var northEast = new google.maps.LatLng(37.836, -122.333); 
var allowedBounds = new google.maps.LatLngBounds(southWest, northEast); 

// Double check boundaries, plot points just in case 
var sW = new google.maps.Marker({ 
    position: southWest, 
    map: map, 
    title: "southWest" 
}); 
var nE = new google.maps.Marker({ 
    position: northEast, 
    map: map, 
    title: "northEast" 
}); 

// Add a move listener to restrict the bounds range 
google.maps.event.addListener(map, "dragend", function() { checkBounds(); }); 


// If the map position is out of range, move it back 
function checkBounds() { 
    // Perform the check and return if OK 
    if (allowedBounds.contains(map.getCenter())) { 
    return; 
    } 

    // It's not OK, so find the nearest allowed point and move there 
    var C = map.getCenter(); 
    var X = C.lng(); 
    var Y = C.lat(); 

    var AmaxX = allowedBounds.getNorthEast().lng(); 
    var AmaxY = allowedBounds.getNorthEast().lat(); 
    var AminX = allowedBounds.getSouthWest().lng(); 
    var AminY = allowedBounds.getSouthWest().lat(); 

    if (X < AminX) {X = AminX; alert('hi') } 
    if (X > AmaxX) {X = AmaxX; alert('hi') } 
    if (Y < AminY) {Y = AminY; alert('hi') } 
    if (Y > AmaxY) {Y = AmaxY; alert('hi') } 
    alert ("Restricting "+Y+" "+X); 
    map.setCenter(new LatLng(Y,X)); 
} 

}); 
</script> 
<body> 

<div id="gmap" style="width: 480px; height: 440px;"></div> 

</body> 
</html> 

會有人介意借了一雙眼睛,看看我是否錯過了什麼? :D

(StackOverflow上還有另一個最新的版本3代碼,名爲'我如何限制Google Maps API V3中的平移'?然而,這種行爲在視覺上「折回」而不是簡單地限制超出範圍)

+0

試試這個職位:http://stackoverflow.com/questions/3818016/google-maps-v3-limit-viewable-area-and-zoom-level – 2011-11-29 17:18:34

回答