2011-11-20 53 views
41

Tôi muốn thêm mã bên trong hàm disable() để vô hiệu hóa kéo và phóng to trong Google Maps API v3 bằng cách nhấp vào nút 'vô hiệu hóa'.tắt tính năng kéo thu phóng trong bản đồ Google bằng cách nhấp vào nút

<script type="text/javascript"> 
    var map; 

    function initialize() { 
var uluru = new google.maps.LatLng(21, 57); 
map = new google.maps.Map(document.getElementById("map"), { 
    zoom: 6, 
    center: uluru, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}); 
} 


function disable(){ 

} 

</script> 


<body onload="initialize()" > 

    <input type="button" id="next" value="disableZoomDrag" onclick="disable()"> 

</body> 

Trả lời

117

Bạn có thể sử dụng phương pháp setOptions() trên đối tượng bản đồ:

map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true}); 

Nếu điều này không ngăn cản phóng to, bạn luôn có thể thiết lập mức tối thiểu và zoom tối đa đến mức zoom hiện hành.

Ngoài ra còn có tùy chọn disableDefaultUI, có thể mất tất cả các sự kiện này trong tài khoản, nhưng có thể vô hiệu hóa nhấp vào các yếu tố hiện có.

+0

cảm ơn bạn rất nhiều. Bạn r awesome ^^ –

+0

Chỉ cần một lưu ý, bạn cũng có thể thêm chúng khi bắt đầu một thể hiện mới của đối tượng bản đồ: 'var map = new google.maps.Map (mapElement, mapOptions);' where 'mapOptions' sẽ là các tùy chọn của bạn : 'var mapOptions = {draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true};' –

2

@ Câu trả lời của ScottE đã chỉ cho tôi đúng hướng sử dụng map.setOptions(). Tuy nhiên, từ số API documentation, tôi thấy rằng có một bộ tùy chọn thanh lịch hơn để đặt. Có lẽ đây là những câu trả lời mới hơn, nhưng chúng hoạt động khá tốt với tôi.

function disablePanningAndScrolling() 
{ 
    map.setOptions({ 
     zoomControl: false, 
     gestureHandling: 'none' 
    }); 
} 

Điều này sẽ vô hiệu hóa việc thu phóng và thu phóng.

Để trở về điều bình thường, chỉ cần thiết lập các thuộc tính về mặc định:

function enablePanningAndScrolling() 
{ 
    map.setOptions({ 
     zoomControl: true, 
     gestureHandling: 'greedy' // or 'cooperative'* 
    }); 
} 

*: mặc định là tham lam nếu trang không phải là cuộn, hợp tác xã khi nó được. Chọn bất kỳ tình huống nào trong ứng dụng của bạn.

Các vấn đề liên quan