谷歌地圖API切換可拖動真/假

Question

我試圖創建一個按鈕，點擊時，切換谷歌地圖的值（真/假）的jQuery功能'可拖動'。

我一直在尋找，並得到儘可能找到這個代碼看起來可能是我所追求的：

var x = false; 
$(element).on('click', function(){ 
if (!x){ 
    //function 
    x = true; 
} 
else { 
    //function 
    x = false; 
} 
}); 

但我堅持就如何實現它，或者如果它甚至是正確的道路。

這裏是我的jQuery的地圖：

function initialize() { 

    var styles = [ { },{ } ]; 


    var styledMap = new google.maps.StyledMapType(styles, 
     {name: "Styled Map"}); 

    var locations = [ 
    ['WELWYN GARDEN CITY ', 51.805616,-0.192647, 2], 
    ['STANMORE  ', 51.603199,-0.296803, 1] 
]; 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
navigationControl: true, 
scrollwheel: false, 
 scaleControl: false, 
 draggable: false, 
    zoom: 10, 
    center: new google.maps.LatLng(51.75339,-0.210114), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 
    var image = '/images/icons/map.png'; 

var marker, i; 


for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5], locations[i][6], locations[i][7], locations[i][8], locations[i][9], locations[i][10], locations[i][11], locations[i][12], locations[i][13], locations[i][14], locations[i][15], locations[i][16], locations[i][17], locations[i][18], locations[i][19]), 
    map: map, 
    icon: image, 
    zIndex: 10 
    }); 





    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 
map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style'); 
    } 

希望這是有道理的，非常感謝

Answer 1

1. 讓地圖全球。

2. 撥動它的可拖動屬性是這樣的：

   功能toggleMapDraggable（）{ 如果（map.get（ 「拖動」））{ map.set（ 「拖動」，假）; } else { map.set（「draggable」，true）; } }

代碼片斷：

var map; 
 

 
function toggleMapDraggable() { 
 
    if (map.get("draggable")) { 
 
    map.set("draggable", false); 
 
    } else { 
 
    map.set("draggable", true); 
 
    } 
 
} 
 

 
function initialize() { 
 

 
    var locations = [ 
 
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2], 
 
    ['STANMORE  ', 51.603199, -0.296803, 1] 
 
    ]; 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    navigationControl: true, 
 
    scrollwheel: false, 
 
    scaleControl: false, 
 
    draggable: false, 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.75339, -0.210114), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; 
 

 
    var marker, i; 
 

 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     icon: image, 
 
     zIndex: 10 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" /> 
 
<div id="map_canvas"></div>