谷歌地圖上的折線按預期作業。但想在滑鼠懸停時在多種顏色之間交換折線顏色
讓我們說兩個位置之間的折線 [鏈接]，如果折線 [鏈接] 有問題，它會設定為紅色，如果折線 [鏈接] 存在延遲或擁塞，它會設定為橙色，但是默認為綠色。在我們的世界地圖中，它有很多折線[各個位置之間的鏈接]，想讓操作員用他正在查看的粉紅色突出顯示折線 [鏈接]
有沒有辦法在滑鼠懸停時提取折線的當前筆劃顏色代碼[紅色，橙色或綠色]并將其更改為粉紅色，因此當滑鼠移出時，將其恢復為活動顏色[紅色，橙色或綠色]？
示例代碼：
HTML：
<html>
<head>
<title>Simple Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&v=weekly" async></script>
</body>
</html>
CSS：
#map { height: 100%; }
html, body { height: 100%; margin: 0; padding: 0; }
JAVA腳本：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain",});
const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 },];
const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2,});
google.maps.event.addListener(flightPath, "mouseover", function(event) { this.setOptions({strokeColor: "#FF1493", }); });
google.maps.event.addListener(flightPath, "mouseout", function(event) { this.setOptions({strokeColor: "#008000", }); });
flightPath.setMap(map);
}
uj5u.com熱心網友回復：
您可以使用折線的 strokeColor 屬性 - 并在偵聽器中提取它并稍后使用它：lastStrokeColor = this.strokeColor;.
基于上述示例的示例代碼：https ://jsfiddle.net/jdtvqLrx/2/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/485015.html
標籤：javascript html 谷歌地图 鼠标移到