1

我正在寻找更改谷歌地图的标记图标，同时使用 DirectionsRenderer 创建路径。尝试这样做，我按照以下步骤操作。

  • 为起点和终点创建了两个图标。
  • 在 rendererOptions 中设置 suppressMarkers: false
  • 然后将这两个标记放置到路径的起​​点和终点

所以现在我在两端都有我习惯创建的图标。

但我的要求是这些标记应该是可拖动的。所以我设置了draggable：true，现在它工作正常。

但现在我的问题是在拖动图标时，路径应该是动态更改的，应该类似于 https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-draggable

我试图通过向这两个标记添加侦听器来做到这一点：“拖动”事件 - 并在拖动标记的同时绘制路径。但是我得到的结果与“directions-draggable”示例不同。事实上，虽然我可以渲染路径，但之前绘制的路径仍然存在于地图上。但是清除地图上存在的所有路径然后重新绘制所有路径不是我的要求。

那么有没有办法在更改标记图标时获得与“可拖动方向”相同的结果/效果。

提前致谢...

4

1 回答 1

2

这个使用可拖动自定义图标的方向示例是在引入可拖动方向功能之前开发的。

代码片段：

// this variable will collect the html which will eventually be placed in the side_bar 
var side_bar_html = "";

var gmarkers = [];
var map = null;
var startLocation = null;
var endLocation = null;
var directionsService = null;
var polyline = new google.maps.Polyline({
  path: [],
  strokeColor: '#FF0000',
  strokeWeight: 3
});

function initialize() {
  var center = new google.maps.LatLng(24.7756, 121.0062);

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  directionsService = new google.maps.DirectionsService();
  var request = {
    origin: "532 Beacon St., Boston, MA",
    destination: "77 Massachusetts Ave, Cambridge, MA",
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };
  directionsService.route(request, RenderCustomDirections);
}

function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    var summaryPanel = document.getElementById("directions_panel");
    var detailsPanel = document.getElementById("direction_details");
    startLocation = new Object();
    endLocation = new Object();

    summaryPanel.innerHTML = "";
    detailsPanel.innerHTML = '<ul>';

    // For each route, display summary information.
    for (var i = 0; i < route.legs.length; i++) {
      var routeSegment = i + 1;
      summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
      summaryPanel.innerHTML += route.legs[i].start_address + " to ";
      summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
      summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
    }
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      if (i == 0) {
        startLocation.latlng = legs[i].start_location;
        startLocation.address = legs[i].start_address;
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
      }
      endLocation.latlng = legs[i].end_location;
      endLocation.address = legs[i].end_address;
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        detailsPanel.innerHTML += "<li>" + steps[j].instructions;
        var dist_dur = "";
        if (steps[j].distance && steps[j].distance.text) dist_dur += "&nbsp;" + steps[j].distance.text;
        if (steps[j].duration && steps[j].duration.text) dist_dur += "&nbsp;" + steps[j].duration.text;
        if (dist_dur != "") {
          detailsPanel.innerHTML += "(" + dist_dur + ")<br /></li>";
        } else {
          detailsPanel.innerHTML += "</li>";

        }
        for (k = 0; k < nextSegment.length; k++) {
          polyline.getPath().push(nextSegment[k]);
          bounds.extend(nextSegment[k]);
        }
      }
    }

    detailsPanel.innerHTML += "</ul>"
    polyline.setMap(map);
    map.fitBounds(bounds);
    endLocation.marker = createMarker(endLocation.latlng, "end", endLocation.address, "red");
    // == create the initial sidebar ==
    makeSidebar();
  } else alert(status);
}

var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_red.png",
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));

function getMarkerImage(iconColor) {
  if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
    iconColor = "red";
  }
  if (!icons[iconColor]) {
    icons[iconColor] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_" + iconColor + ".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0, 0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
  }
  return icons[iconColor];

}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.

// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.

var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
  // The shadow image is larger in the horizontal dimension
  // while the position and offset are the same as for the main image.
  new google.maps.Size(37, 34),
  new google.maps.Point(0, 0),
  new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
  coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
  type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

function createMarker(latlng, label, html, color) {
  var contentString = '<b>' + label + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    draggable: true,
    map: map,
    shadow: iconShadow,
    icon: getMarkerImage(color),
    shape: iconShape,
    title: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = label;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    var request = {
      origin: startLocation.marker.getPosition(),
      destination: endLocation.marker.getPosition(),
      travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    startLocation.marker.setMap(null);
    endLocation.marker.setMap(null);

    gmarkers = [];
    polyline.setMap(null);
    polyline = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
    });
    directionsService.route(request, RenderCustomDirections);

  });

  return marker;
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
  var html = "";
  for (var i = 0; i < gmarkers.length; i++) {
    html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
  }
  document.getElementById("side_bar").innerHTML = html;
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#map_canvas {
  height: 100%
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  <table border="1">
    <tr>
      <td>
        <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="direction_details" style="margin:20px;"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="side_bar" style="margin:20px;"></div>
      </td>
    </tr>
  </table>
</div>

于 2012-07-07T13:06:09.113 回答