Почему событие mouseover не отправляется для полилинии в карте Google?

Question

У меня сложный поток, в котором я должен прикрепить событие mouseover для каждой полилинии на карте. Код для прикрепления события прост:

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

});

Но это событие касается нескольких полилиний, а не других. В чем может быть причина?

Редактировать

Ниже приведен еще один код, который находится перед кодом выше и используется для определения ломаной линии:

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

var polyline = this.polyline;

Редактировать 05 апреля 2012

Ниже приведен код, который создает проблему. Пожалуйста, объясните, почему это происходит, и порекомендуйте любое решение. Спасибо

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

• демо: http://jsfiddle.net/kbngxku9/

 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 bounds = [];
   var bounds_group_1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
     bounds_group_2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
   bounds.push(bounds_group_1);
   bounds.push(bounds_group_2);

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

 function addPolylineSegment(bounds) {

   // optionally you can put each polyline
   // segment into an array to later use...

   var polyline;

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

   polyline.setMap(map);

   // attach event listener to each segment...
   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);

Answer 2

ОК, я пытаюсь сохранить решение близко к вашему коду.Ключ менял this.line.setOptions обоих слушателей на 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
        });
    });

Я видел похожий случай с маркерами в другом вопросе.Я полагаю, что this внутри функции () уже ссылается на первый аргумент addListener (), в данном случае this.line, так что вы просто говорите this.Вот jsfiddle:

http://jsfiddle.net/zfFsD/

Еще одно изменение, которое я сделал, - добавление кода links [] в моей initialize ().Желаю тебе всего наилучшего!

Answer 3

Я думаю, у вас проблема с областью действия.

изменить

this.line.setOptions

с

this.setOptions

Firebug и console.log () ваши друзья:)

Answer 4

Мне удалось обойти это, используя метод, описанный ниже.Если я вас правильно понял, цикл, в котором вы присоединяете слушателя к полилинии, на самом деле не «привязывается» к полилинии таким образом, но вместо этого вам нужен новый экземпляр класса, который содержит полилинию и слушателей.Таким образом, каждая ломаная получает своего слушателя.

Пожалуйста, см. Объяснение ниже.

РЕДАКТИРОВАТЬ 5.4.2012

Вот также грубая демонстрация JSFiddle кода в действии. Ссылка на демоверсию JSFiddle

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.
};

Надеюсь, это поможет!

Приветствия