如何用自定义图标替换谷歌地图（Google Maps）标记图标？

嘿，我仔细看了你的代码和问题描述，发现问题的根源其实很简单——你自己添加了自定义标记，但Google Maps的DirectionsRenderer组件默认会自动渲染起点、终点和途经点的默认标记，这就导致两种标记重叠在一起，看起来像是自定义图标没生效。下面给你具体的解决步骤：

核心解决思路 #

关闭DirectionsRenderer的默认标记渲染，完全用你自己的自定义标记来替代。

步骤1：修改DirectionsRenderer初始化配置 #

在创建directionsRenderer的时候，添加suppressMarkers: true参数，让它不再自动生成默认标记：

directionsRenderer = new google.maps.DirectionsRenderer({
  map: map,
  suppressMarkers: true // 关键：禁用默认标记
});

步骤2：优化自定义标记的添加逻辑（可选但推荐） #

你原来的代码会给每个路段的起点和终点都加标记，比如途经点会被重复添加两次（前一个路段的终点+后一个路段的起点），可以优化成只添加一次起点、途经点和终点：

function calculateAndDisplayRoute(start, end, waypoints) {
  directionsService.route({
    origin: start,
    destination: end,
    waypoints: waypoints,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsRenderer.setDirections(response);
      var route = response.routes[0];
      
      // 添加起点标记
      addCustomMarkers(route.legs[0].start_location, 'Start');
      
      // 添加优化后的途经点标记（route.waypoint_order是优化后的途经点顺序）
      route.waypoint_order.forEach(function(index) {
        addCustomMarkers(route.legs[index].end_location, 'Waypoint');
      });
      
      // 添加终点标记
      addCustomMarkers(route.legs[route.legs.length - 1].end_location, 'End');
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

步骤3：确认自定义图标配置正确 #

你的addCustomMarkers函数里的图标配置是没问题的，但要确保url指向的图标能正常访问，scaledSize和labelOrigin的设置符合你的图标尺寸需求：

function addCustomMarkers(location, label) {
    new google.maps.Marker({
      position: location,
      map: map,
      label: label,
      icon: { // Custom marker icon
        url: "https://i.postimg.cc/hvp0CVp9/detox-logo-1.png", // 确保此URL有效
        scaledSize: new google.maps.Size(30, 30),
        labelOrigin: new google.maps.Point(15, -10)
      }
    });
}

完整修正后的代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Map Route with Custom Markers</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg"></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    $(document).ready(function() {
      var map;
      var directionsService;
      var directionsRenderer;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.7128, lng: -74.0060}, // New York
          zoom: 10
        });

        directionsService = new google.maps.DirectionsService();
        // 这里添加了suppressMarkers: true
        directionsRenderer = new google.maps.DirectionsRenderer({
          map: map,
          suppressMarkers: true
        });
      }

      function calculateAndDisplayRoute(start, end, waypoints) {
        directionsService.route({
          origin: start,
          destination: end,
          waypoints: waypoints,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsRenderer.setDirections(response);
            var route = response.routes[0];
            
            // 添加起点标记
            addCustomMarkers(route.legs[0].start_location, 'Start');
            
            // 添加优化后的途经点标记
            route.waypoint_order.forEach(function(index) {
              addCustomMarkers(route.legs[index].end_location, 'Waypoint');
            });
            
            // 添加终点标记
            addCustomMarkers(route.legs[route.legs.length - 1].end_location, 'End');
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
      
      function addCustomMarkers(location, label) {
          new google.maps.Marker({
            position: location,
            map: map,
            label: label,
            icon: { // Custom marker icon
              url: "https://i.postimg.cc/hvp0CVp9/detox-logo-1.png",
              scaledSize: new google.maps.Size(30, 30),
              labelOrigin: new google.maps.Point(15, -10)
            }
          });
      }

      initMap();

      // Example usage:
      var start = 'New York, NY';
      var end = 'Philadelphia, PA';
      var waypoints = [
        {
          location: "Trenton, NJ",
          stopover: true
        }
      ];
      calculateAndDisplayRoute(start, end, waypoints);
    });
  </script>
</body>
</html>

这样修改后，地图上就只会显示你设置的自定义图标，完全替代默认的Google Maps标记啦！

备注：内容来源于stack exchange，提问作者Steve Hammons