使用 google 地图 JavaScript API 鼠标悬停时多线颜色交换

Question

google 地图上的折线按预期工作。但想在鼠标悬停时在多种颜色之间交换折线颜色

假设两个位置之间有一条折线 [link]，如果折线 [link] 有问题，它会设置为红色，如果有延迟或拥塞poly line [link] 设置为橙色，但默认情况下为绿色。在我们的世界地图中，它在不同位置之间有如此多的多边形线 [links]，希望操作员用粉红色突出显示多边形线 [link]，他正在寻找 [=16] =]

有没有办法在鼠标悬停时提取折线的当前笔触颜色代码[红色，橙色或绿色]并将其更改为粉红色，因此当鼠标移开时，将其恢复为活动颜色[红色，橙色或绿色]?

示例代码：

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

JAVAScript:

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

Answer 1

您可以使用折线的 strokeColor 属性 - 并在侦听器中提取它并稍后使用：lastStrokeColor = this.strokeColor;.

基于您上面示例的示例代码：https://jsfiddle.net/jdtvqLrx/2/

使用 google 地图 JavaScript API 鼠标悬停时多线颜色交换

poly line colour swap on mouse over using google maps JavaScript API

html

javascript

google-maps

mouseover

示例代码：

HTML:

CSS:

JAVAScript: