如何在Google Maps v3中將路徑添加到路線中？

Question

我有一個帶有DirectionsRenderer的幾條路線的Google地圖。我想用鼠標懸停事件來改變路線風格，但是我不知道怎麼樣，是否可行？ 謝謝

Answer 1

據我所知，沒有辦法將事件直接附加到由DirectionsRenderer繪製的折線上。要完成此操作，您需要在自己的頂部繪製自己的折線（因此爲zIndex），然後將mouseover/mouseout事件附加到該折線上。

下面是它是如何做一個例子，假設你只有一個途徑：

var polylineOptions = new google.maps.Polyline({ 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var polylineOptionsMouseOver = new google.maps.Polyline({ 
    strokeColor: '#ffffff', 
    strokeOpacity: 1.0, 
    strokeWeight: 10 
}); 

google.maps.event.addListener(dirRenderer, 'directions_changed', function(event) { 

    var path = dirRenderer.getDirections().routes[0].overview_path; 
    var eventLine = new google.maps.Polyline({ 
     path: path, 
     visible: true, 
     strokeOpacity: 0, 
     zIndex: 1000 
    }); 
    eventLine.setMap(map); 

    google.maps.event.addListener(eventLine, 'mouseover', function(event) { 
     dirRenderer.setOptions({ 
      'polylineOptions':polylineOptionsMouseOver, 
      'preserveViewport': true 
     }); 
     dirRenderer.setMap(map); 
    }); 

    google.maps.event.addListener(eventLine, 'mouseout', function(event) { 
     dirRenderer.setOptions({ 
      'polylineOptions':polylineOptions, 
      'preserveViewport': true 
     }); 
     dirRenderer.setMap(map); 
    }); 

}); 

既然你說你有多個路由，您可以通過routes[]陣列需要循環，併爲每個路由做一些事情。另外，我不認爲你可以設計一條特定的路線，所以你可能需要將每條路線保存在一個獨立的DirectionsRenderer。