爲什麼mouseover事件不會調度爲谷歌地圖中的折線？

Question

我有一個複雜的流程，我必須爲地圖上的每條多段線添加鼠標懸停事件。附加事件的代碼很簡單：

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-APR-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演示：http://jsfiddle.net/wasimbhalli/9bg6x/

Answer 1

我設法解決此使用下述方法。如果我正確地理解了你，那麼你將一個監聽器附加到一條折線的循環實際上並沒有以這種方式「連接」到折線，而是需要一個包含折線和監聽器的新類實例。這樣，每條折線都可以獲得它自己的監聽器。

請參閱下面的說明。

編輯2012年4月5日

這裏也是在行動代碼的原油的jsfiddle演示。 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. 
}; 

希望這有助於！

乾杯

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/

我做了把鏈接[]代碼在我的初始化其他變化（）。祝你好運！

Answer 3

我認爲你有一個範圍問題。

變化

this.line.setOptions 

與

this.setOptions 

螢火蟲和執行console.log（）是你的朋友:)

Answer 4

• 演示：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);​ 

---

很少考慮，我會做這樣的鏈接

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

或通過建立一個JSON對象和循環到它，而不需要做

更好

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