mouseover上的Leaflet.js多段線顏色變化

Question

我有一個使用Leaflet中的點列表繪製的多線。這裏是代碼

road= new L.Polyline(pointList, { 
    color: color, 
    weight: 10, 
    lineCap:"square", 
    lineJoin:"bevel", 
    opacity: 0.6, 
    smoothFactor: 1 
    }); 

我需要改變這個polyLine的顏色爲mouseover上的綠色。我正在使用下面的代碼。但它不起作用。

road.on('mouseover', function (e) { 
     var layer=e.target; 
     layer.options["color"]="green"; 
     console.log(layer.options["color"]); 

     }); 

任何人都可以給我任何想法我怎麼能做到這一點？

Answer 1

你應該使用setStylemethod，像這樣：

road.on('mouseover', function() { 
    this.setStyle({ 
     color: 'red' //or whatever style you wish to use; 
    }); 
}); 

此外，要恢復到最初的風格上mouseout，保存風格的變量，並寫上：

road.on('mouseout', function() { 
    this.setStyle(initialStyle) 
});