web-dev-qa-db-ja.com

WayPoints Google Maps API 3でLat Longの配列を渡す

ウェイポイントオブジェクト内の緯度と経度の配列を渡し、ルートを描画するためにdirectionserviceオブジェクトに渡しますか？

1つの緯度経度を渡したい場合は、次のように渡します。

    waypoints: 
[{
     location:new google.maps.LatLng(42.496403,-124.413128),
     stopover:false
}],

しかし、緯度と経度の配列を渡すにはどうすればよいですか？

私が試したコードを見つけてください（スクリプトエラーが発生します）：

<!DOCTYPE html>
<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>Lat long way points (LatLng)</title>
<style type="text/css"> 
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<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;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
      var first=new google.maps.LatLng(42.496403,-124.413128);
      var second=new google.maps.LatLng(42.496401,-124.413126);
      var values=[first,second];
      alert(values[0]);
      alert(values[1]);
      var waypts=[];
      alert(values.length); 
    for(var i=0;i<=values.length;i++)
    {
     waypts.Push({location:values[i],stopover:true}); 
    }
     alert(waypts);
    var request = {
        Origin: "1521 NW 54th St, Seattle, WA 98107 ",
        destination: "San Diego, CA",
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById("directions_panel");
        summaryPanel.innerHTML = "";
        // 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 />";
        }
      } else {
        alert("directions response "+status);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<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">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
<script src="http://www.google-analytics.com/Urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
</script> 
</body>
</html>
javascriptgoogle-mapsgoogle-maps-api-3
11
sTg

これは複数のウェイポイントを追加する方法です

waypoints: [{location: first, stopover: false},
                        {location: second, stopover: false}],

サンプルの完全なコード

<!DOCTYPE html>
<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>Lat long way points (LatLng)</title>
        <style type="text/css"> 
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
        </style>
        <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;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var chicago = new google.maps.LatLng(41.850033, -87.6500523);
                var myOptions = {
                    zoom: 6,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: chicago
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }

            function calcRoute() {
                var first = new google.maps.LatLng(42.496403, -124.413128);
                var second = new google.maps.LatLng(42.496401, -124.413126);

                var request = {
                    Origin: "1521 NW 54th St, Seattle, WA 98107 ",
                    destination: "San Diego, CA",
                    waypoints: [{location: first, stopover: false},
                        {location: second, stopover: false}],
                    optimizeWaypoints: true,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        var route = response.routes[0];
                        var summaryPanel = document.getElementById("directions_panel");
                        summaryPanel.innerHTML = "";
                        // 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 />";
                        }
                    } else {
                        alert("directions response " + status);
                    }
                });
            }
        </script>
    </head>
    <body onload="initialize()">
        <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">
            <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
        </div>
        <script src="http://www.google-analytics.com/Urchin.js" type="text/javascript">
        </script> 
        <script type="text/javascript">
        </script> 
    </body>
</html>
17
Samba Sidibe

ここの例は役立つはずです https://developers.google.com/maps/documentation/javascript/directions?hl=cs#Waypoints

ウェイポイントオブジェクトを配列に効果的に割り当てます。例：

waypoints : waypointsArray

配列に複数のウェイポイントオブジェクトが含まれている場合：

  {
      location: LatLng,
      stopover:true
  }

お役に立てれば。

5
ChirsSwires