Google Maps主Polyline无法触发点击选中事件问题求助

你的程序中，备选路径的Polyline可正常点击切换选中状态，但红色主路径点击时无法触发事件监听器，核心原因是**DirectionsRenderer默认渲染的自带路线覆盖在了自定义主路径Polyline之上**，导致自定义Polyline无法接收点击事件。

解决方案 #

初始化DirectionsRenderer时添加suppressPolylines: true配置，禁用其自带的路线渲染，确保所有自定义Polyline都能正常响应点击：

<!DOCTYPE html>
<html>
<head>
  <title>Show All Possible Routes</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map;
    var directionsService;
    var directionsDisplay;
    var polylines = [];
    var mainPolyline = null;

    function initMap() {
      var mapOptions = {
        center: { lat: 23.022594, lng: 72.570681 }, // Center point coordinates
        zoom: 12, // Zoom level
        mapTypeId: google.maps.MapTypeId.ROADMAP // Map type
      };

      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsService = new google.maps.DirectionsService();
      // 添加suppressPolylines: true禁用自带路线渲染
      directionsDisplay = new google.maps.DirectionsRenderer({ 
        map: map,
        suppressPolylines: true 
      });

      var origin = new google.maps.LatLng(23.022594, 72.570681); // Origin coordinates
      var destination = new google.maps.LatLng(22.308836, 70.782300); // Destination coordinates

      var waypoints = [
        // Array of LatLng objects representing waypoints (if needed)
        // Example: new google.maps.LatLng(37.7895, -122.4348)
      ];

      var request = {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING,
        waypoints: waypoints,
        provideRouteAlternatives: true // Request multiple route options
      };

      directionsService.route(request, function(result, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
          var routes = result.routes;
          for (var i = 0; i < routes.length; i++) {
            var route = routes[i];
            displayRoute(route, i === 0);
          }
        }
      });
    }

    function displayRoute(route, isMainPath) {
      var path = [];
      for (var i = 0; i < route.legs.length; i++) {
        var leg = route.legs[i];
        for (var j = 0; j < leg.steps.length; j++) {
          var step = leg.steps[j];
          var decodedPath = google.maps.geometry.encoding.decodePath(step.polyline.points);
          path = path.concat(decodedPath);
        }
      }

      var polyline = new google.maps.Polyline({
        path: path,
        strokeColor: isMainPath ? '#FF0000' : '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 4,
        clickable: true,
        map: map
      });

      polyline.addListener('click', function() {
        selectRoute(polyline);
      });

      polylines.push(polyline);

      if (isMainPath) {
        mainPolyline = polyline;
      }
    }

    function selectRoute(clickedPolyline) {
      if (mainPolyline) {
        mainPolyline.setOptions({ strokeColor: '#000000', strokeWeight: 4 });
      }
      mainPolyline = clickedPolyline;
      mainPolyline.setOptions({ strokeColor: '#FF0000', strokeWeight: 6 });
    }

    function initGoogleMaps() {
      // Initialize Google Maps API
      var script = document.createElement('script');
      script.src =
        'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap';
      script.defer = true;
      document.head.appendChild(script);
    }

    // Load Google Maps API asynchronously
    initGoogleMaps();
  </script>
</body>
</html>

说明 #

添加suppressPolylines: true后，DirectionsRenderer只会渲染路线的起点、终点标记，不会再生成自带的路线Polyline，你的自定义路径Polyline会处于地图最上层，能够正常响应点击事件。

内容的提问来源于stack exchange，提问作者Anil Parshi