更改路线中标记的默认图标

change default icon of marker in route

本文关键字：默认图标改路更新时间：2023-09-26

当我在两个位置之间搜索路线时，我想更改标记的默认图标。我该怎么做？我使用了这个代码，但我没有得到只有路线和点的地图

var start  = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
 icon:'http://www.google.com/mapfiles/dd-start.png',
 map: map  });
var end = new google.maps.Marker({
position: new google.maps.LatLng(lat1, long1),
icon:'http://www.google.com/mapfiles/dd-end.png',
map: map  });
var request = {
            origin: start,
                destination: end,
                optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

创建渲染器时，添加此选项，然后将标记放置在起点（开始）和终点（结束）

    directionsDisplay = new google.maps.DirectionsRenderer({
      suppressMarkers: true
    });

这是一个工作示例，根据您的需求进行更改。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.7749295, -122.4194155);
    var myOptions = {
      zoom:13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      } else {
        if (waypoints.length < 9) {
          waypoints.push({ location: destination, stopover: true });
          destination = event.latLng;
          addMarker(destination);
        } else {
          alert("Maximum number of waypoints reached");
        }
      }
    });
  }
  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }
  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }
    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }
    var mode = google.maps.DirectionsTravelMode.DRIVING;
    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
      }
    });
    clearMarkers();
    directionsVisible = true;
  }
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null;
    waypoints = [];
    directionsVisible = false;
  }
  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">
    <tr>
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</body>
</html>

好的，我的尝试：

在DirectionsRendererOptions对象中设置visible = false和draggable = true
创建DirectionsRenderer对象
自行创建标记（使用draggable=true选项）

将dragstart和drag事件从标记传递到渲染器标记（开始和结束）

google.maps.event.addListener(marker_start, 'dragstart', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'dragstart', e);
});
google.maps.event.addListener(marker_start, 'drag', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'drag', e);
});
google.maps.event.addListener(marker_end, 'dragstart', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'dragstart', e);
});
google.maps.event.addListener(marker_end, 'drag', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'drag', e);
});

您可以通过下一行代码更改所有标记的图标：

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        icon:"put_here_the_url_to_your_icon",
    },
});

如果你想为地图上的每个标记使用不同的图标，你可以使用marker构造函数创建每个具有自己位置和图标的标记：

new google.maps.Marker({
    position: {lat: 37.753212, lng: 14.991608}, //Example
    map: map,
    icon: your_marker_image
});

（您可以使用新创建的标记作为起点、终点或路点标记）。然后将当前对象（标记选项）传递给DirectionRenderer构造函数：

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        visible:false,
    },
});

因此，没有显示方向服务的标记。

https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions