By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,362 Members | 1,354 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,362 IT Pros & Developers. It's quick & easy.

Google MAP: Can not addListener to polygons which parsed from XML

P: 1
Anyone help me please.
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
  1. var polys = [];
  2.         var labels = [];
  3.         var htmls = [];
  4.  
  5.  
  6.       // === A method for testing if a point is inside a polygon
  7.       // === Returns true if poly contains point
  8.       // === Algorithm shamelessly stolen from http://alienryderflex.com/polygon/
  9.       GPolygon.prototype.Contains = function(point) {
  10.         var j=0;
  11.         var oddNodes = false;
  12.         var x = point.lng();
  13.         var y = point.lat();
  14.         for (var i=0; i < this.getVertexCount(); i++) {
  15.           j++;
  16.           if (j == this.getVertexCount()) {j = 0;}
  17.           if (((this.getVertex(i).lat() < y) &&
  18. (this.getVertex(j).lat() >= y))
  19.           || ((this.getVertex(j).lat() < y) &&
  20. (this.getVertex(i).lat() >= y))) {
  21.             if ( this.getVertex(i).lng() + (y -
  22. this.getVertex(i).lat())
  23.             /  (this.getVertex(j).lat()-this.getVertex(i).lat())
  24.             *  (this.getVertex(j).lng() - this.getVertex(i).lng())<x )
  25. {
  26.               oddNodes = !oddNodes
  27.             }
  28.           }
  29.         }
  30.         return oddNodes;
  31.       }
  32.  
  33.  
  34.       GEvent.addListener(map, "click", function(overlay,point) {
  35.       confirm(point);
  36.         if (!overlay) {
  37.           for (var i=0; i<polys.length; i++) {
  38.             if (polys[i].Contains(point)) {
  39.               var myHTML = "<font color=red><b>" + labels[i] + "</b></font><br /
  40. >" + htmls[i];
  41.               map.openInfoWindowHtml(point,myHTML);
  42.               //i = 999; // Jump out of loop
  43.             }
  44.           }
  45.         }
  46.       });
  47.  
  48.       GEvent.addListener(map, "mousemove", function(point) {
  49.           for (var i=0; i<polys.length; i++) {
  50.             if (polys[i].Contains(point)) {
  51.               var myPoly = polys[i];
  52.               myPoly.setFillStyle({opacity: 0.3});
  53.               cur_poly = i;
  54.               //i = 999; // Jump out of loop
  55.             }
  56.             else {
  57.                 var myPoly = polys[i];
  58.                 myPoly.setFillStyle({opacity: 0});
  59.             }
  60.           }
  61.       });
  62.  
  63.       // Read the data from companies.xml
  64.  
  65.       var request = GXmlHttp.create();
  66.       request.open("GET", "' . base_path() . $mod_path . '/
  67. companies.xml", true);
  68.       request.onreadystatechange = function() {
  69.         if (request.readyState == 4) {
  70.           var xmlDoc = GXml.parse(request.responseText);
  71.  
  72.           // ========= Now process the polylines ===========
  73.           var companies =
  74. xmlDoc.documentElement.getElementsByTagName("company");
  75.  
  76.           // read each line
  77.           for (var a = 0; a < companies.length; a++) {
  78.             // get any state attributes
  79.             var label  = companies[a].getAttribute("name");
  80.             // read each point on that line
  81.             var points = companies[a].getElementsByTagName("point");
  82.             var pts = [];
  83.             for (var i = 0; i < points.length; i++) {
  84.               pts[i] = new
  85. GLatLng(parseFloat(points[i].getAttribute("lat")),
  86.  
  87. parseFloat(points[i].getAttribute("lng")));
  88.             }
  89.             var htmlObject = companies[a].getElementsByTagName("html");
  90.             if (htmlObject.length > 0)
  91.                 var html = htmlObject[0].childNodes[0].nodeValue;
  92.             else
  93.                 var html = "";
  94.             var poly = new GPolygon(pts,"#000000",0,0,"#0000CC",0,
  95. {clickable:false});
  96.             polys.push(poly);
  97.             labels.push(label);
  98.             htmls.push(html);
  99.             map.addOverlay(poly);
  100.           }
  101.           //
  102. ================================================
  103.         }
  104.       }
  105.       request.send(null);
Nov 5 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
I think mouseover might be more efficient unless you need co-ordinates for every mouse movement. Also, you're using the click event, but you've set "clickable" to false when creating the polygon (line 95).
Nov 11 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.