Question

我尝试创建一个按钮，在点击时，切换google maps jquery function＆＃39; draggable＆＃39;的值（true / false）。

我一直在搜索并找到这段代码，看起来它可能就像我之后的那样：

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&nbsp;', 51.805616,-0.192647, 2],
  ['STANMORE &nbsp;', 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

让您的地图全球化。
切换它的可拖动属性，如下所示：

function toggleMapDraggable（）{ if（map.get（＆＃34; draggable＆＃34;））{ map.set（＆＃34;可拖动＆＃34;，FALSE）; } else { map.set（＆＃34;可拖动＆＃34;，TRUE）; } }

代码段

＆＃13;

var map;

function toggleMapDraggable() {
  if (map.get("draggable")) {
    map.set("draggable", false);
  } else {
    map.set("draggable", true);
  }
}

function initialize() {

  var locations = [
    ['WELWYN GARDEN CITY&nbsp;', 51.805616, -0.192647, 2],
    ['STANMORE &nbsp;', 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);

＆＃13;

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

＆＃13;

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

＆＃13;

Google Maps API切换draggable true / false

1 个答案: