使用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演示中出现了错误。