如何移除Google Maps自定义图标替换后的默认标记？

问题出在你使用的DirectionsRenderer——它在渲染路线时，默认会自动生成起点和终点的默认标记，和你手动创建的自定义标记叠加显示，所以看起来默认标记没被移除。

解决方案 #

初始化DirectionsRenderer时，添加suppressMarkers: true配置项，禁用它自动生成的标记，只保留你自定义的标记：

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

修改后的关键代码片段 #

map = new google.maps.Map(document.getElementById('googleMap'), mapProp),
// 实例化路线服务
directionsService = new google.maps.DirectionsService,
// 添加suppressMarkers禁用默认标记
directionsDisplay = new google.maps.DirectionsRenderer({
  map: map,
  suppressMarkers: true
});

var iconStart = {
          url: '<%=request.getContextPath()%>/resources/images/common/icon-pin-02.svg',
          scaledSize: new google.maps.Size(42, 52), // 缩放尺寸
          origin: new google.maps.Point(0,0),
          anchor: new google.maps.Point(16, 32)
};
var iconEnd = {
        url: '<%=request.getContextPath()%>/resources/images/common/icon-pin-01.svg',
        scaledSize: new google.maps.Size(39, 49), // 缩放尺寸
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(16, 32)
};

markerA = new google.maps.Marker({
  position: pointA,
  map: map,
  icon: iconStart
});

markerB = new google.maps.Marker({
  position: pointB,
  map: map,
  icon: iconEnd
});
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

修改后，地图上就只会显示你自定义的两个标记，DirectionsRenderer生成的默认起点终点标记会被隐藏。

内容的提问来源于stack exchange，提问作者Thanh Nam Pham