1

このソリューションを使用して、以下のソース コードを使用して 2 つの場所を正常にマッピングすることができました。開始地点と終了地点の間に 3 番目または 4 番目の地点をウェイポイントとして追加するにはどうすればよいですか? 2 番目のエンドポイントを追加しようとしましたが、うまくいきませんでしたか?

    <!DOCTYPE html>
 <html>
   <head>
     <title></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
       html, body, #map {
         margin: 0;
         padding: 0;
         height: 100%;
       }
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var Center=new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
    center:Center,
    zoom:20,
    mapTypeId:google.maps.MapTypeId.SATELLITE
};

map=new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);

var marker=new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});

marker.setMap(map);
Route();
}

function Route() {

var start = new google.maps.LatLng(18.210885,-67.140884);
var end =new google.maps.LatLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
 };
 directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
} else { alert("couldn't get directions:"+status); }
});
} 

google.maps.event.addDomListener(window,'load',initialize);
</script>
   </head>
   <body>
   <div id="map"></div>
   </body>
 </html>
4

1 に答える 1

2

Polylineを快適に使用できると思います。

このバリアントを試してください：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex polylines</title>
    <link rel="stylesheet" type="text/css" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var poly;
var map;

function initialize() {
  var chicago = new google.maps.LatLng(18.210885,-67.140884);
  var mapOptions = {
    zoom: 20,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var lineCoordinates = [
    new google.maps.LatLng(18.210885,-67.140884),
    new google.maps.LatLng(18.211685,-67.141114),
    new google.maps.LatLng(18.211685,-67.141684)
  ];


    var polyOptions = {
      path: lineCoordinates,
      strokeColor: '#dd4b39',
      strokeOpacity: 1.0,
      strokeWeight: 5
    }
    poly = new google.maps.Polyline(polyOptions);
    poly.setMap(map);

    for (i = 0; i <= lineCoordinates.length; i++)
    {
        if (lineCoordinates[i] !== undefined)
        {
            new google.maps.Marker({
              position: lineCoordinates[i],
              title: 'some title',
              map: map
            });
        }
    }
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
于 2013-07-15T21:21:41.117 に答える