Question

我使用谷歌地图方向api在地图上绘制交通信息。我希望在一条街上显示我的自定义交通信息，以及两个行车路线。

当我请求从A到B以及从B到A的路线时，它会使两条路线重叠，所以实际上它只显示一条路线。

var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];

function calcRoute(entry) {
  var request = {
      origin: entry.origin,
      destination: entry.destination,
      travelMode: google.maps.TravelMode["DRIVING"]
  };

  if (entry.color == 1){
    vStrokeColor = "#FF0000"
    vzIndex = 100

  }else if (entry.color == 2){
    vStrokeColor = "#0DFF00"
    vzIndex = 1
  }

  var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true,  strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
  directionsDisplay.setMap(map);

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

有没有办法通过Google Apis实现这一目标？

感谢。

更新：更正GPS坐标

＆＃13;

var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];
var vStrokeColor;
var vzIndex;
var map;
var directionsService = new google.maps.DirectionsService();

function calcRoute(entry) {
  var request = {
      origin: entry.origin,
      destination: entry.destination,
      travelMode: google.maps.TravelMode["DRIVING"]
  };

  if (entry.color == 1){
    vStrokeColor = "#FF0000"
    vzIndex = 100

  }else if (entry.color == 2){
    vStrokeColor = "#0DFF00"
    vzIndex = 1
  }

  var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true,  strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
  directionsDisplay.setMap(map);

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}  
function initialize() {   
    var myLatlng = new google.maps.LatLng(41.08801, 16.83689);
    var mapOptions = {
        zoom: 15, 
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
      }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    calcRoute(list[0]);
    calcRoute(list[1]);

}  
google.maps.event.addDomListener(window,'load',initialize);

＆＃13;

html,body,#map {
  height: 100%;
  width: 100%;
}

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
    </script>
<div id="map"></div>

＆＃13;

谷歌地图：在一条路线上绘制两条线（因为方向）

0 个答案: