I want anytime mousemove to one polygon, it's opacity becomes 0.3, and mouseout polygon, i'ts opacity return to 0 again. I means mousemove to show the polygon and hiding it when mouseout.
I parsed points from XML and then add polygons to the map.
But my problem that I can't addListener (mousemove) and (mouseout) for
each of polygon, so I decide to addListener to the map and check if
any polygon contains clicked point. But my map is too slow with my
algorithms. Anyone help me to fix to addListener to each of polygons?.
Thank you very much !
Here is my code:
Expand|Select|Wrap|Line Numbers
- var polys = [];
- var labels = [];
- var htmls = [];
- // === A method for testing if a point is inside a polygon
- // === Returns true if poly contains point
- // === Algorithm shamelessly stolen from http://alienryderflex.com/polygon/
- GPolygon.prototype.Contains = function(point) {
- var j=0;
- var oddNodes = false;
- var x = point.lng();
- var y = point.lat();
- for (var i=0; i < this.getVertexCount(); i++) {
- j++;
- if (j == this.getVertexCount()) {j = 0;}
- if (((this.getVertex(i).lat() < y) &&
- (this.getVertex(j).lat() >= y))
- || ((this.getVertex(j).lat() < y) &&
- (this.getVertex(i).lat() >= y))) {
- if ( this.getVertex(i).lng() + (y -
- this.getVertex(i).lat())
- / (this.getVertex(j).lat()-this.getVertex(i).lat())
- * (this.getVertex(j).lng() - this.getVertex(i).lng())<x )
- {
- oddNodes = !oddNodes
- }
- }
- }
- return oddNodes;
- }
- GEvent.addListener(map, "click", function(overlay,point) {
- confirm(point);
- if (!overlay) {
- for (var i=0; i<polys.length; i++) {
- if (polys[i].Contains(point)) {
- var myHTML = "<font color=red><b>" + labels[i] + "</b></font><br /
- >" + htmls[i];
- map.openInfoWindowHtml(point,myHTML);
- //i = 999; // Jump out of loop
- }
- }
- }
- });
- GEvent.addListener(map, "mousemove", function(point) {
- for (var i=0; i<polys.length; i++) {
- if (polys[i].Contains(point)) {
- var myPoly = polys[i];
- myPoly.setFillStyle({opacity: 0.3});
- cur_poly = i;
- //i = 999; // Jump out of loop
- }
- else {
- var myPoly = polys[i];
- myPoly.setFillStyle({opacity: 0});
- }
- }
- });
- // Read the data from companies.xml
- var request = GXmlHttp.create();
- request.open("GET", "' . base_path() . $mod_path . '/
- companies.xml", true);
- request.onreadystatechange = function() {
- if (request.readyState == 4) {
- var xmlDoc = GXml.parse(request.responseText);
- // ========= Now process the polylines ===========
- var companies =
- xmlDoc.documentElement.getElementsByTagName("company");
- // read each line
- for (var a = 0; a < companies.length; a++) {
- // get any state attributes
- var label = companies[a].getAttribute("name");
- // read each point on that line
- var points = companies[a].getElementsByTagName("point");
- var pts = [];
- for (var i = 0; i < points.length; i++) {
- pts[i] = new
- GLatLng(parseFloat(points[i].getAttribute("lat")),
- parseFloat(points[i].getAttribute("lng")));
- }
- var htmlObject = companies[a].getElementsByTagName("html");
- if (htmlObject.length > 0)
- var html = htmlObject[0].childNodes[0].nodeValue;
- else
- var html = "";
- var poly = new GPolygon(pts,"#000000",0,0,"#0000CC",0,
- {clickable:false});
- polys.push(poly);
- labels.push(label);
- htmls.push(html);
- map.addOverlay(poly);
- }
- //
- ================================================
- }
- }
- request.send(null);