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.
精彩评论