使用 Google Maps v3 在地图和 HTML 列表视图中突出显示路线

Question

我有一张包含许多路线的地图，我也想在地图下方的 HTML 列表视图中显示所有路线，然后在我单击地图或列表视图时看到一些交互。这是我的代码：

initialize();

$("#routes a").click(function() {
    $("#debug").html("<p>I will highlight a "+ $(this).text() +"</p>");
});

function initialize() {

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(10.012552, 76.327043),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Define an info window
    var infowindow = new google.maps.InfoWindow({
        content: ""
    });

    var highlightedPoly;

    // ---------------------------------------------------------

    // Encapsulate below (simulates my JSON scope)
    (function () {

        // Route 1 array
        var polylineCoordinates = [
        new google.maps.LatLng(10.013566, 76.331549),
        new google.maps.LatLng(10.012552, 76.327043) 
        ];

        var polyline = new google.maps.Polyline({
            title: "This is the FIRST route",
            path: polylineCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 2.0,
            strokeWeight: 5
        });

        polyline.setMap(map);

        // Add a "click" event for this route
        google.maps.event.addListener(polyline, "click", function (e) {
            // Un-highlight the current highlighted trip (if any)
            if (highlightedPoly) {
                highlightedPoly.setOptions({
                    strokeColor: "#FF0000",
                    zIndex: 1
                });
            }
            // Highlight the clicked trip
            polyline.setOptions({
                strokeColor: "#00FFAA",
                zIndex: 6000
            });
            // Save the trip in a global variable (needed for closure)
            highlightedPoly = polyline;

            infowindow.setPosition(e.latLng);
            infowindow.setContent(this.title);
            infowindow.open(map);
        });

        // Add this route to the HTML
        $("#routes").append("<a href='#'>Route 1</a><br />");

    })(); // close the encapsulation

    // ---------------------------------------------------------

    // Encapsulate below (simulates my JSON scope)
    (function () {

        // Route 2 array
        polylineCoordinates = [
        new google.maps.LatLng(10.014566, 76.331549),
        new google.maps.LatLng(10.015552, 76.327043)
        ];

        var polyline = new google.maps.Polyline({
            title: "This is the SECOND route",
            path: polylineCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 2.0,
            strokeWeight: 5
        });

        polyline.setMap(map);

        // Add a "click" event for this route
        google.maps.event.addListener(polyline, "click", function (e) {
            // Un-highlight the current highlighted trip (if any)
            if (highlightedPoly) {
                highlightedPoly.setOptions({
                    strokeColor: "#FF0000",
                    zIndex: 1
                });
            }
            // Highlight the clicked trip
            polyline.setOptions({
                strokeColor: "#00FFAA",
                zIndex: 6000
            });
            // Save the trip in a global variable (needed for closure)
            highlightedPoly = polyline;

            infowindow.setPosition(e.latLng);
            infowindow.setContent(this.title);
            infowindow.open(map);
        });

        // Add this route to the HTML
        $("#routes").append("<a href='#'>Route 2</a><br />");

    })(); // close the encapsulation

    // ---------------------------------------------------------

    // Click anywhere on the map to close the info window
    google.maps.event.addListener(map, "click", function () {
        if (highlightedPoly) {
            highlightedPoly.setOptions({
                strokeColor: '#FF0000',
                zIndex: 1
            });
            highlightedPoly = null;
        }

        infowindow.close();
    });

}

理想情况下，我希望当我将鼠标悬停在列表视图中的一条路线上（或单击）时，它会在地图上突出显示该路线......反之，当我突出显示一条路线时在地图上，它应该在列表视图中突出显示路线：

列表视图与每条路由一起动态生成：

$("#routes").append("<a href='#'>Route 2</a><br />");

我能以某种方式将两者联系在一起吗？

我有一个Fiddle demo 可用。

Answer 1

对How to remove polylines of google maps api 3这个答案很感兴趣，我尝试了它，我自己找到了解决方案。

基本上我需要一个包含所有路由的全局数组，然后直接在 google.maps.event.addListener 中执行一些 jQuery/CSS。

这是突出显示地图所需的代码（从列表视图单击）：

// My global variables
var allRoutes = [];
var highlightedPoly;

$("#routes a").click(function () {
    $("#debug").html("<p>I will highlight " + $(this).text() + "</p>");

    var dataIndex = $(this).data("index");

    polyline = allRoutes[dataIndex];
    // Un-highlight the current highlighted trip (if any)
    if (highlightedPoly) {
        highlightedPoly.setOptions({
            strokeColor: "#FF0000",
            zIndex: 1
        });
    }
    // Highlight the clicked trip
    polyline.setOptions({
        strokeColor: "#00FFAA",
        zIndex: 6000
    });
    // Save the trip in a global variable (needed for closure)
    highlightedPoly = polyline;
});

这是为了突出显示列表视图（从地图/路线点击）：

// You must add a property, "index", to the polyline object.

// In each .addListener (to highlight in list-view)
$("#routes").find("[data-index='"+ this.index +"']").css("background-color", "khaki");
----
// In the "close infowindow" .addListener (disable highlight in list-view)
$("#routes a").css("background-color", "");

地图和列表视图中突出显示的路线：

我已更新Fiddle demo。我知道它使用的是静态的东西，但这对于动态来说是微不足道的。

更新 #1

在实现此测试代码后，我发现 Fiddle 演示中有一个错误。