Hi all,
Nice to see you all again here, still working with google map, almost done the google map project using phonegap, but i was facing a little bit problem about polygon. I want to draw polygon on-the-fly , not by passing the coordinate to google, but drawing polygon by mouse click to defined some area.
I have tried googling around to find some plugin, but couldn’t find any. I forget to tell you that I’m using Google Maps v3, not v2. Google has some plugin / library for Polygon drawing on version 2.
After some time, i decided to modified Polyline drawing plugin from snipplr.com.
what you need to do is to change the polyLine variable to Polygon definition:
// var polyOptions = {
// strokeColor: "#3355FF",
// strokeOpacity: 0.8,
// strokeWeight: 4
// };
// polyLine = new google.maps.Polyline(self.polygonOptions);
var polyOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.25
}
// I change the variable name also here to suit the plugin
// instead of using "polyLine" i change it to "polygon"
// if you do so, you need to change all the polyLine to polygon
polygon = new google.maps.Polygon(self.polygonOptions);
that is the only change that i did. thanks for reading this. hope this will help somebody.
if you want to look at my changes, here is it: (extended from my previous class GeoLocation)
geoMap = jQuery.extend(geoMap,{
initPolygon: function(){
var self = this;
var tmpPolyOptions = {
strokeColor: "#3355FF",
strokeOpacity: 0.4,
strokeWeight: 4
};
self.polygon = new google.maps.Polygon(self.polygonOptions);
self.polygon.setMap(self.gmap);
self.tmpPolyLine = new google.maps.Polyline(tmpPolyOptions);
self.tmpPolyLine.setMap(self.gmap);
},
mapLeftClick: function(event) {
var self = this;
if (event.latLng && self.mapMode=='scan') {
var marker = self.createMarker(event.latLng);
self.markerOthers.push(marker);
if (self.markerOthers.length != 1) {
var vmarker = self.createVMarker(event.latLng);
self.markerVectors.push(vmarker);
vmarker = null;
}
self.polygon.getPath().push(event.latLng);
marker = null;
}
event = null;
},
createMarker: function(point) {
var self = this;
var imageNormal = new google.maps.MarkerImage(
"images/square.png",
new google.maps.Size(11, 11),
new google.maps.Point(0, 0),
new google.maps.Point(6, 6)
);
var imageHover = new google.maps.MarkerImage(
"images/square_over.png",
new google.maps.Size(11, 11),
new google.maps.Point(0, 0),
new google.maps.Point(6, 6)
);
var marker = new google.maps.Marker({
position: point,
map: self.gmap,
icon: imageNormal,
draggable: true
});
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(imageHover);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(imageNormal);
});
google.maps.event.addListener(marker, "drag", function() {
for (var m = 0; m < self.markerOthers.length; m++) {
if (self.markerOthers[m] == marker) {
self.polygon.getPath().setAt(m, marker.getPosition());
self.moveVMarker(m);
break;
}
}
m = null;
});
google.maps.event.addListener(marker, "click", function() {
for (var m = 0; m < self.markerOthers.length; m++) {
if (self.markerOthers[m] == marker) {
marker.setMap(null);
self.markerOthers.splice(m, 1);
self.polygon.getPath().removeAt(m);
self.removeVMarkers(m);
break;
}
}
m = null;
});
return marker;
},
createVMarker: function(point) {
var self = this;
var prevpoint = self.markerOthers[self.markerOthers.length-2].getPosition();
var imageNormal = new google.maps.MarkerImage(
"images/square_transparent.png",
new google.maps.Size(11, 11),
new google.maps.Point(0, 0),
new google.maps.Point(6, 6)
);
var imageHover = new google.maps.MarkerImage(
"images/square_transparent_over.png",
new google.maps.Size(11, 11),
new google.maps.Point(0, 0),
new google.maps.Point(6, 6)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(
point.lat() - (0.5 * (point.lat() - prevpoint.lat())),
point.lng() - (0.5 * (point.lng() - prevpoint.lng()))
),
map: self.gmap,
icon: imageNormal,
draggable: true
});
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(imageHover);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(imageNormal);
});
google.maps.event.addListener(marker, "dragstart", function() {
for (var m = 0; m < self.markerVectors.length; m++) {
if (self.markerVectors[m] == marker) {
var tmpPath = self.tmpPolyLine.getPath();
tmpPath.push(self.markerOthers[m].getPosition());
tmpPath.push(self.markerVectors[m].getPosition());
tmpPath.push(self.markerOthers[m+1].getPosition());
break;
}
}
m = null;
});
google.maps.event.addListener(marker, "drag", function() {
for (var m = 0; m < self.markerVectors.length; m++) {
if (self.markerVectors[m] == marker) {
self.tmpPolyLine.getPath().setAt(1, marker.getPosition());
break;
}
}
m = null;
});
google.maps.event.addListener(marker, "dragend", function() {
for (var m = 0; m < self.markerVectors.length; m++) {
if (self.markerVectors[m] == marker) {
var newpos = marker.getPosition();
var startMarkerPos = self.markerOthers[m].getPosition();
var firstVPos = new google.maps.LatLng(
newpos.lat() - (0.5 * (newpos.lat() - startMarkerPos.lat())),
newpos.lng() - (0.5 * (newpos.lng() - startMarkerPos.lng()))
);
var endMarkerPos = self.markerOthers[m+1].getPosition();
var secondVPos = new google.maps.LatLng(
newpos.lat() - (0.5 * (newpos.lat() - endMarkerPos.lat())),
newpos.lng() - (0.5 * (newpos.lng() - endMarkerPos.lng()))
);
var newVMarker = self.createVMarker(secondVPos);
newVMarker.setPosition(secondVPos);//apply the correct position to the vmarker
var newMarker = self.createMarker(newpos);
self.markerOthers.splice(m+1, 0, newMarker);
self.polygon.getPath().insertAt(m+1, newpos);
marker.setPosition(firstVPos);
self.markerVectors.splice(m+1, 0, newVMarker);
self.tmpPolyLine.getPath().removeAt(2);
self.tmpPolyLine.getPath().removeAt(1);
self.tmpPolyLine.getPath().removeAt(0);
newpos = null;
startMarkerPos = null;
firstVPos = null;
endMarkerPos = null;
secondVPos = null;
newVMarker = null;
newMarker = null;
break;
}
}
});
return marker;
},
moveVMarker: function(index) {
var self = this;
var newpos = self.markerOthers[index].getPosition();
if (index != 0) {
var prevpos = self.markerOthers[index-1].getPosition();
self.markerVectors[index-1].setPosition(new google.maps.LatLng(
newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
));
prevpos = null;
}
if (index != self.markerOthers.length - 1) {
var nextpos = self.markerOthers[index+1].getPosition();
self.markerVectors[index].setPosition(new google.maps.LatLng(
newpos.lat() - (0.5 * (newpos.lat() - nextpos.lat())),
newpos.lng() - (0.5 * (newpos.lng() - nextpos.lng()))
));
nextpos = null;
}
newpos = null;
index = null;
},
removeVMarkers: function(index) {
var self = this;
if (self.markerOthers.length > 0) {//clicked marker has already been deleted
if (index != self.markerOthers.length) {
self.markerVectors[index].setMap(null);
self.markerVectors.splice(index, 1);
} else {
self.markerVectors[index-1].setMap(null);
self.markerVectors.splice(index-1, 1);
}
}
if (index != 0 && index != self.markerOthers.length) {
var prevpos = self.markerOthers[index-1].getPosition();
var newpos = self.markerOthers[index].getPosition();
self.markerVectors[index-1].setPosition(new google.maps.LatLng(
newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
));
prevpos = null;
newpos = null;
}
index = null;
},
markerDelete: function(){
var self = this;
for(var i=0, n=self.markerOthers.length;i<n;i++){
if(typeof self.markerOthers[i].setMap != 'undefined') self.markerOthers[i].setMap(null);
}
self.markerOthers = [];
},
resetPolygonEditor: function(){
var self = this;
if(self.polygon) self.polygon.setMap(null);
self.polygon = null;
if(self.polyLine) self.polyLine.setMap(null);
self.polyLine = null;
if(self.tmpPolyLine) self.tmpPolyLine.setMap(null);
self.tmpPolyLine = null;
for(var i=0, n=self.markerOthers.length;i<n;i++){
if(typeof self.markerOthers[i].setMap != 'undefined') self.markerOthers[i].setMap(null);
}
self.markerOthers = [];
for(var i=0, n=self.markerVectors.length;i<n;i++){
if(typeof self.markerVectors[i].setMap != 'undefined') self.markerVectors[i].setMap(null);
}
self.markerVectors = [];
}
});
If you have some question about the implementation, just poke me by commenting here.
Cheers,
helman
Leave a Reply