Warum mouseover-Ereignis nicht für Polylinie in Google Map senden?

Question

Ich habe einen komplexen Fluss, wo ich mouseover Ereignis für jede Polylinie auf der Karte anhängen muss. Der Code für das Ereignis Befestigung ist einfach:

google.maps.event.addListener(polyline, "mouseover", function() { 
      console.log('event fired'); 

     }); 

Aber das Ereignis wenige Polylinien ist angebracht und nicht an Dritte weiter. Was könnte der Grund sein?

bearbeiten

Im Folgenden einige weitere Code, der vor dem obigen Code und verwendet für die Definition Linienzug:

this.polyline = new google.maps.Polyline({ 
       path : [fromPosition, toPosition], 
       strokeColor : '#CCCCCC', 
       strokeOpacity : 1.0, 
       strokeWeight : 2 
      }); 
    var polyline = this.polyline; 

bearbeiten 05-Apr-2012

Im Anschluss an die Code, der Probleme verursacht, bitte erklären Sie, warum es passiert und empfehlen Sie eine Lösung. Dank

function Link(from, to) { 
     this.from = from; 
     this.to = to; 
    } 


    Link.prototype.show = function() { 
     this.line = new google.maps.Polyline({ 
      path : [this.from, this.to], 
      strokeColor : "#0000FF", 
      strokeOpacity : 0.5, 
      strokeWeight : 6 
     }); 

     this.line.setMap(map); 

     google.maps.event.addListener(this.line, 'mouseover', function() { 
      this.line.setOptions({ 
       strokeOpacity : 1 
      }); 
     }); 

     google.maps.event.addListener(this.line, 'mouseout', function() { 
      this.line.setOptions({ 
       strokeOpacity : 0.5 
      }); 
     }); 
    } 
    var links = []; 
    var link2 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)), link1 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)); 
    links.push(link1); 
    links.push(link2); 

    // I've a long list of links, so I'll prefer a loop 
    for(var i = 0; i < links.length; i++) { 
      links[i].show(); 
    } 

JSFiddle Demo: http://jsfiddle.net/wasimbhalli/9bg6x/

Answer 1

habe ich es geschafft, dies zu umgehen, das Verfahren unter Verwendung von weiter unten beschrieben. Wenn ich Sie richtig verstanden habe, wird die Schleife, in der Sie einen Listener an eine Polylinie anhängen, nicht auf diese Weise an die Polylinie "angehängt", sondern Sie benötigen stattdessen eine neue Klasseninstanz, die die Polylinie und die Listener enthält. Auf diese Weise erhält jede Polylinie ihren eigenen Listener.

Bitte beachten Sie die nachstehenden Erläuterungen.

EDIT 5.4.2012

Hier ist auch eine grobe JSFiddle Demonstration des Codes in Aktion. Link to JSFiddle demo

function initialize() { 

    // initialize Google Maps canvas normally 

    var polylines = []; 

    // Data set of the polylines you want to present on the map, 
    // e.g. [ { lat:"...",lon:"..." }, ...] 

    var polylineData = [{ ... }] 

    for (i in polylineData) { 
     var line = new google.maps.Polyline({ 
      path: [/*coordinates as google.maps.LatLng objects*/] 
     }); 

     // Create a new myPolyLineClass instance that contains the polyline data 
     // and push it to polylines array. 

     polylines.push(new myPolyLineClass(line)); 
    } 

    // Set all the polylines and their individual listeners on map 

    for (i in polylines) { 
     polylines[i].line.setMap(map); 
    } 
} 

function MyPolylineClass(lineData) { 
    this.line = lineData; 

    // + all other data you want the polylines to contain 

    // Add listeners using google.maps.event.addListener to all class instances 
    // when they are constructed. 

    // for instance: 

    google.maps.event.addListener(line, 'mouseover', function() { 
      line.setOptions({ [options you want to set when area is hovered 
      and selected] }); 
    }); 

    // Add listeners also for when polyline is not hovered anymore, respectively, 
    // and other methods you might want to call when polylines are being interacted with. 
}; 

Hoffe, das hilft!

Prost

Answer 2

OK, ich versuche, die Lösung in der Nähe des Code zu halten. Der Schlüssel änderte sich sowohl this.line.setOptions des Zuhörers zu this.setOptions:

google.maps.event.addListener(this.line, 'mouseover', function() { 
     this.setOptions({ 
      strokeOpacity : 1 
     }); 
    }); 

    google.maps.event.addListener(this.line, 'mouseout', function() { 
     this.setOptions({ 
      strokeOpacity : 0.5 
     }); 
    }); 

ich einen ähnlichen Fall mit Markern in einer anderen Frage gesehen habe. Ich glaube, this innerhalb der Funktion() bezieht sich bereits auf das erste Argument von addListener(), in diesem Fall this.line, so dass Sie abgedeckt sind nur sagen this. Hier ist die jsfiddle:

http://jsfiddle.net/zfFsD/

Die andere Änderung, die ich gemacht wurde, um die Links setzen [] Code in meinem initialize(). Wünsche Ihnen das Beste!

Answer 3

Ich denke, Sie haben ein Problem mit dem Bereich.

Änderung

this.line.setOptions 

mit

this.setOptions 

Firebug und console.log() sind deine Freunde :)

Answer 4

• Demo:http://jsfiddle.net/9bg6x/23/

var map; 

function initialize() { 

    var mapOptions = { 
     center: new google.maps.LatLng(-3, 23), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); 

    var links = []; 
    var link2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)], 
     link1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)]; 
    links.push(link1); 
    links.push(link2); 

    for (var i = 0; i < links.length; i++) { 
     doJob(links[i]); 
    } 
} 

function doJob(polyline_bounds) { 
    var polyline; 
    polyline = new google.maps.Polyline({ 
     path: polyline_bounds, 
     strokeColor: "#0000FF", 
     strokeOpacity: 0.5, 
     strokeWeight: 6 
    }); 

    polyline.setMap(map); 


    google.maps.event.addListener(polyline, 'mouseover', function (event) { 
     this.setOptions({ 
      strokeOpacity: 1 
     }); 
    }); 

    google.maps.event.addListener(polyline, 'mouseout', function (event) { 
     this.setOptions({ 
      strokeOpacity: 0.5 
     }); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);​ 

---

wenig Rücksicht, ich werde für Links wie dies tun

var links = []; 
var link2 = [ 
    [-3.5999999999999996, 23.4], 
    [-4.5, 23.4] 
]; 
var = link1 = [ 
    [-3.5999999999999996, 23.4], 
    [-3.5999999999999996, 18] 
]; 
links.push(link1); 
links.push(link2); 

for (var i = 0; i < links.length; i++) { 
    var polyline_bounds = []; 
    for (var j = 0; j < links[i].length; j++) { 
     polyline_bounds.push(new google.maps.LatLng(links[i][j][0], links[i][j][1])); 
    } 
    doJob(polyline_bounds); 
} 
} 

oder besser durch den Bau eines json Objekt und Looping in sie ohne Notwendigkeit zu tun

  links.push(link1); 
     links.push(link2);