Question

我知道这个问题之前已经得到解答，但不幸的是，所有到演示/解释页面的链接目前都已消失。

我想使用Google Maps API V3在同一张地图上绘制两个方向（一个用于驾驶，一个用于步行）。如果可能，我想使用Google的默认路线＆＃39;线条，因为它们看起来比折线更好。

有人知道怎么做吗？非常感谢任何帮助！

Answer 1

这是我过去为此做的一个例子。诀窍是多个DirectionsRenderer实例。

var MAP,
  DIRECTIONSRENDERER1,
  DIRECTIONSRENDERER2,
  USER,
  PLACE1,
  PLACE2;

function displayDirections1(result, status) {
  DIRECTIONSRENDERER1.setDirections(result)
}

function displayDirections2(result, status) {
  DIRECTIONSRENDERER2.setDirections(result)
}

function getDirections(location, displayCallback) {
  //https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRequest
  var request = {
    travelMode: google.maps.TravelMode.DRIVING,
    origin: USER,
    destination: location
  };

  //https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsService
  var service = new google.maps.DirectionsService();
  service.route(request, displayCallback);
}

//Set up the map
function initialize() {
  var mapOptions = {
    zoom: 6,
    //I used the center of the USA
    center: new google.maps.LatLng(38.8282, -98.5795)
  };
  //Make the map
  MAP = new google.maps.Map(document.getElementById('map'), mapOptions);

  DIRECTIONSRENDERER1 = new google.maps.DirectionsRenderer({
    map: MAP
  })
  DIRECTIONSRENDERER2 = new google.maps.DirectionsRenderer({
    map: MAP
  })

  //Make marker for User location
  //NOTE: for testing, the user position is fixed
  USER = new google.maps.LatLng(38.8282, -98.5795);
  new google.maps.Marker({
    label: 'U',
    cursor: "User Location",
    position: USER,
    map: MAP
  });
  //used for this demo
  document.getElementById("latitude").textContent = USER.lat();
  document.getElementById("longitude").textContent = USER.lng();

  //Make marker for Place1 (location is arbitrary)
  PLACE1 = new google.maps.LatLng(37, -97);
  new google.maps.Marker({
    label: '1',
    cursor: "Place 1",
    position: PLACE1,
    map: MAP
  });

  //Make marker for Place2 (location is arbitrary)
  PLACE2 = new google.maps.LatLng(39, -102);
  new google.maps.Marker({
    label: '2',
    cursor: "Place 2",
    position: PLACE2,
    map: MAP
  });


  document.getElementById("p1button").addEventListener("click", function(e) {
    getDirections(PLACE1, displayDirections1);
  });

  document.getElementById("p2button").addEventListener("click", function(e) {
    getDirections(PLACE2, displayDirections2);
  });


  //Trigger map redraw when dom element is resized
  google.maps.event.addDomListener(window, 'resize', function() {
    google.maps.event.trigger(MAP, 'resize');
  });

  //Preserve map perspective when after resize
  google.maps.event.addListener(MAP, 'resize', function() {
    var center = MAP.getCenter();
    google.maps.event.addListenerOnce(MAP, 'center_changed', function() {
      MAP.setCenter(center);
    });
  });
}

//runs the code to set up demo
initialize();

html,
body,
#map {
  height: 100%;
  width: 100%;
  border-width: 0;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<b>Your location:</b>
<br/>
<span>Latitude: </span><span id="latitude"></span>
<br/>
<span>Longitude: </span><span id="longitude"></span>
<br/>
<br/>
<button id="p1button">Directions to Place1</button>
<button id="p2button">Directions to Place2</button>

<div id="map"></div>

Google Maps API V3（JS）：一张地图上的多个路线

1 个答案: