开发者

Toggle panning and marker movement lock in Google Maps API v3

I have and interface where a user can manage multiple locations for their business, adding additional locations and removing locations they no longer need.

In my interface I show a list of locations each with their own map.

My question is how do I lock a map to prevent the user from panning or moving the marker until they click on the "edit location" button?

Is there any sort of toggleMapLock function?

So far I have the following two methods. The lock(); method works fine, but the unlock(); method doesn't work for some reason.

lock: function() {
  this.map.disableDoubleClickZoom = true;
  this.map.draggable = false;
  this.map.keyboardShortcuts = false;
  this.map.navigationControl = false;
  this.map.scaleControl = false;
  this.map.scrollwheel = false;
  this.map.streetViewControl = false;
  this.marker.draggable开发者_高级运维 = false;
},

unlock: function() {
  this.map.disableDoubleClickZoom = false;
  this.map.draggable = true;
  this.map.keyboardShortcuts = true;
  this.map.navigationControl = true;
  this.map.scaleControl = true;
  this.map.scrollwheel = true;
  this.map.streetViewControl = true;
  this.marker.draggable = true;
  console.log("unlock");  
},


disableDoubleClickZoom (and the other properties listed) are not public properties on the Map class - they are properties of the MapOptions class. To change their value you need something similar to the following:

lock: function() {
  this.map.setOptions({
    disableDoubleClickZoom: true,
    draggable: false
  });
},

unlock: function() {
  this.map.setOptions({
    disableDoubleClickZoom: false,
    draggable: true
  });
}

This creates a MapOptions object (inside the {}'s) and passes it to SetOptions, which updates the current state of the Map based on the values passed in.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜