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

Question

I want to change the default icon of marker when I search route between two locations. 我想在两个位置之间搜索路线时更改标记的默认图标。 How can I do it? 我该怎么做？ I use this code but I didn't get only the map without route and points 我使用此代码，但我没有仅获得没有路线和点的地图

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

Answer 1

When you create the renderer add this option, then place your markers at the origin (start) and destination(end) 创建渲染器时，请添加此选项，然后将标记放置在起点（起点）和终点（终点）

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

Answer 2

here is the working example, change according to your requirement. 这是工作示例，请根据您的要求进行更改。

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

Answer 3

Ok, my try: 好吧，我的尝试：

Set visible = false and draggable = true in DirectionsRendererOptions object 在DirectionsRendererOptions对象中设置visible = false和draggable = true
Create DirectionsRenderer object 创建DirectionsRenderer对象
Create markers on your own (with draggable=true option) 自己创建标记（使用draggable=true选项）

Pass dragstart and drag event from your marker to renderer markers (start and end) 将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); });

Answer 4

You can change the icon of all markers by the next line of code: 您可以通过下一行代码更改所有标记的图标：

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

If you want use different icon for each marker on the map, you can create each markers with its own positions and icons using Marker constructor: 如果要对地图上的每个标记使用不同的图标，则可以使用Marker构造函数创建每个具有其自身位置和图标的标记：

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

(you can use your newly created markers as start, end or waypoints markers). （您可以将新创建的标记用作起点，终点或航点标记）。 Then pass to the DirectionRenderer constructor the current object (markerOption): 然后将当前对象（markerOption）传递给DirectionRenderer构造函数：

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

So the markers of the direction service are not showed. 因此，不会显示定向服务的标记。

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

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

问题描述

4 个解决方案

解决方案1
3 2012-04-02 17:17:33

解决方案2
2 2012-04-02 18:46:24

解决方案3
0 2012-04-12 19:20:15

解决方案4
0 2019-06-25 13:35:07

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

问题描述

4 个解决方案

解决方案1 3 2012-04-02 17:17:33

解决方案2 2 2012-04-02 18:46:24

解决方案3 0 2012-04-12 19:20:15

解决方案4 0 2019-06-25 13:35:07

解决方案1
3 2012-04-02 17:17:33

解决方案2
2 2012-04-02 18:46:24

解决方案3
0 2012-04-12 19:20:15

解决方案4
0 2019-06-25 13:35:07