Since the Google Maps API v3 does not support the beginning or end of editing a polygon or polyline, I am trying to create one of my own.
I draw markers for each point, then to finish editing, I set all the markers to hide them when I click on the first index point ("0"), and then I set the polygon to clickable - true. But the user can still click on the map and continue drawing the polygon. I want to turn off the event listener, but turn it back on when I hover over it. Can this be done? If I use Remove Listener, can I attach another listener to the polygon when I hover over so they can edit it?
MapShaper.Feature.prototype.poly = function(type) { var color = MapShaper.getColor(false), path = new google.maps.MVCArray, poly, self = this, el = type + "_b"; if(type=="shape"){ poly = self.createShape( {strokeWeight: 3, fillColor: color}, path ); }else if(type=="line"){ poly = self.createLine( {strokeWeight: 3, strokeColor: color }, path ); } poly.markers = new google.maps.MVCArray; google.maps.event.addListener(poly, "mouseover", function(){ poly.markers.forEach(function(polyMarker, index){ polyMarker.setVisible(true); }); }); MapShaper.Feature.prototype.createShape = function(opts, path) { var poly; poly = new google.maps.Polygon({ clickable:false, strokeWeight: opts.strokeWeight, fillColor: opts.fillColor }); poly.setPaths(new google.maps.MVCArray([path])); return poly; } MapShaper.Feature.prototype.createShape = function(opts, path) { var poly; poly = new google.maps.Polygon({ clickable:false, strokeWeight: opts.strokeWeight, fillColor: opts.fillColor }); poly.setPaths(new google.maps.MVCArray([path])); return poly; } google.maps.event.addListener(marker, 'click', function() { if (!marker.index == 0) { marker.setMap(null); markers.removeAt(marker.index); path.removeAt(marker.index); MapShaper.reindex(markers); if(markers.getLength() == 0){ MapShaper.removeFeature(poly.id); } } else { markers.forEach(function(marker, index) { marker.setVisible(false) }); poly.setOptions({clickable: true}); } });
Dennis
source share