Question

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

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()

任何人都可以帮助我突出显示我点击的任何路线吗？

Answer 1

我不确定你的意思是什么＆＃39;突出显示＆＃39;路线...如果只是改变颜色，你可以做类似的事情：

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

点击它时突出显示折线路线（Google Maps v3）

1 个答案: