Jquery 单击多段线管线时高亮显示该管线（Google Maps v3）

我的地图上有很多路线，我想在点击时突出显示一条路线。实际上，我点击了一个停车标记=路线中的最后一个位置。这是我的代码：

function initialize() {

  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // need this as global variable (used outside this $(document)

  // Get all trips within selected timespan
  $.ajax({
    dataType: "json",
    type: "get",
    url: "data.json"
  }).done(function(jsonRoutes) {

    var lastLatLng = null; // needed for placing a marker on the last stop-position

    // Define an "InfoWindow" for clicking on the stop-position marker
    var infowindow = new google.maps.InfoWindow({
    });

    // Click anywhere on the map to close the info window
    google.maps.event.addListener(map,"click",function() {
      infowindow.close();
    });

    // Get all routes from a JSON query
    $.each(jsonRoutes, function(key,obj) {

      coordinatesRoute = []; // clear/set an array holding all coordinates

      var data = obj.data; // object which contains all JSON data

      // Walk through each position in the route
      $.each(data, function(key,obj) {
        var lat = obj.lat;
        var lng = obj.lng;

        // Push actual coordinate to both coordinate arrays
        coordinatesRoute.push(new google.maps.LatLng(lat,lng));
        coordinatesAll.push(new google.maps.LatLng(lat,lng));

        lastLatLng = new google.maps.LatLng(lat,lng); // store the last position
      });

      // Draw the polyline route (the whole route)
      var polylinePath = new google.maps.Polyline({
        path: coordinatesRoute,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      polylinePath.setMap(map);

       // Insert a "stop-position" marker (last position in route)
      var icon = new google.maps.MarkerImage("icon.png",null,null,new google.maps.Point(0,8));
      var marker = new google.maps.Marker({
        position: lastLatLng,
        title: "Stop",
        map: map,
        zIndex: 5000,
        icon: icon
      });

      // Click on a "stop-position" marker to open an info window
      google.maps.event.addListener(marker,"click",function() {
        infowindow.open(map,this);
        infowindow.setContent(this.title);
      });

    }); // $.each(jsonRoutes, function(key,obj)

    // Auto center/zoom map to show all routes
    // Source: http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/
    var bounds = new google.maps.LatLngBounds(); // create a new viewpoint bound
    for(var i = 0, LtLgLen = coordinatesAll.length; i < LtLgLen; i++) {
      bounds.extend (coordinatesAll[i]); // increase the bounds to take this point
    }
    map.fitBounds(bounds);

  }); // $.ajax

} // initialize()

函数初始化（）{
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map canvas”），mapOptions）；//需要将其作为全局变量（在$（文档）之外使用）
//获取选定时间范围内的所有行程
$.ajax({
数据类型：“json”，
键入：“获取”，
url:“data.json”
}).done（函数（jsonRoutes）{
var lastLatLng=null；//需要在最后一个停止位置放置标记
//定义用于单击停止位置标记的“信息窗口”
var infowindow=new google.maps.infowindow({
});
//单击地图上的任意位置以关闭“信息”窗口
google.maps.event.addListener（映射，“单击”，函数（）{
infowindow.close（）；
});
//从JSON查询获取所有路由
$。每个（jsonRoutes，函数（键，obj）{
CoordinateRoute=[]；//清除/设置包含所有坐标的数组
var data=obj.data；//包含所有JSON数据的对象
//走完路线上的每个位置
$。每个（数据、功能（键、obj）{
var lat=对象lat；
var lng=obj.lng；
//将实际坐标推送到两个坐标阵列
CoordinateRoute.push（新的google.maps.LatLng（lat，lng））；
coordinatesAll.push（新的google.maps.LatLng（lat，lng））；
lastLatLng=new google.maps.LatLng（lat，lng）；//存储最后一个位置
});
//绘制多段线管线（整个管线）
var polylinePath=new google.maps.Polyline({
路径：协调路径，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
polylinePath.setMap（map）；
//插入“停止位置”标记（路线中的最后位置）
var icon=new google.maps.MarkerImage（“icon.png”，null，null，new google.maps.Point（0,8））；
var marker=new google.maps.marker({
职位：lastLatLng，
标题：“停止”，
地图：地图，
zIndex:5000，
图标：图标
});
//单击“停止位置”标记打开信息窗口
google.maps.event.addListener（标记“单击”，函数（）{
打开（地图，这个）；
infowindow.setContent（this.title）；
});
})/$。每个（jsonRoutes，函数（键，obj）
//自动居中/缩放地图以显示所有路线
//资料来源：http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/
var bounds=new google.maps.LatLngBounds（）；//创建新的视点边界
对于（var i=0，LtLgLen=coordinates all.length；i

---

有人能帮我找出我需要什么来突出显示我点击的任何路线吗？

我不知道“突出显示”路线到底是什么意思……如果只是为了改变颜色，你可以这样做：

        google.maps.event.addListener(marker, "click", function() {
            polylinePath.setOptions({strokeColor: '#00FFaa'});
            infowindow.open(map,this);
            infowindow.setContent(this.title);
        });

但这样做会将颜色固定为新值

您可以更改mouseover/mouseout事件的颜色属性，例如：

        google.maps.event.addListener(polylinePath, 'mouseover', function(latlng) {
            polylinePath.setOptions({strokeColor: '#00FFAA'});
        });

        google.maps.event.addListener(polylinePath, 'mouseout', function(latlng) {
            polylinePath.setOptions({strokeColor: '#FF0000'});
        });

因此路径颜色将设置回初始颜色

更新：如果要关闭先前高亮显示的多段线，可以执行以下操作：添加保存高亮显示的多段线的全局变量：

var highlightedPoly;

并将事件侦听器更改为：

        google.maps.event.addListener(marker, "click", function() {
            if (highlightedPoly) {
                highlightedPoly.setOptions({strokeColor: '#FF0000'});
            }

            polylinePath.setOptions({strokeColor: '#00FFaa'});
            highlightedPoly = polylinePath;

            infowindow.open(map,this);
            infowindow.setContent(this.title);
        });

映射单击事件侦听器可以以类似的方式展开：

    google.maps.event.addListener(map, "click", function() {
        infowindow.close();

        if (highlightedPoly) {
            highlightedPoly.setOptions({strokeColor: '#FF0000'});
        }        
    });

---

这很好，但当路线高亮显示时（单击标记时），是否有任何方式当我点击地图上的其他地方时，它可以将颜色设置回正常状态？这正是我想要的-非常感谢。我将稍微更新我的问题，以便对未来的读者更精确。也许我应该添加一个新问题，但这与完全相同的代码有关-你还知道我如何添加单个信息窗口吗每条路线？我有更多的可用信息（例如所花的时间），我想在每条路线上显示这些信息，但如果我使用变量，我似乎只能在所有路线上显示相同的文本。这取决于您的设计。人们使用不同的方法：硬编码信息、数据库……您可以检查与信息窗口相关的其他问题。