Question

根据谷歌地图，我可以计划一条跨越几个航路点的路线。这里解释如下：http：//code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes

现在api希望我添加这样的航点：

location: waypoints

所以waypoints是一个数组，我必须分配到位置：参数，但从我在演示中看到的，他们用位置的字符串填充数组。我想知道是否可以通过纬度和经度而不是字符串？

更新：这是我尝试创建路线的部分。我现在已经在整个循环中放置了相同的值，但如果我不使用变量值，则id不起作用

function calcRoute() {

    var waypts = [];

    for (var i in owt.stores.spotStore.data.map) {
        waypts.push({
            location:  new google.maps.LatLng(12.3, -33.6),
            stopover:true
        });
        console.log(waypts);
    }
    var request = {
        origin: new google.maps.LatLng(50.82788, 3.26499),
        destination: new google.maps.LatLng(50.82788, 3.26499),
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

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

Answer 1

根据API reference：

DirectionsWaypoint表示行程和目的地之间的位置，通过该位置路由行程。

位置 LatLng |字符串Waypoint   地点。 可以是地址字符串或   经纬度。可选的的

因此，创建一个具有lat-long值的新Waypoint应如下所示

return {
    location:new google.maps.LatLng(12.3, -33.6),
    stopover:true
};

Answer 2

路点可以是字符串也可以是latlng。

http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions

特别是：

waypoints []（可选）指定一个 DirectionsWaypoints数组。航点通过路由来改变路线通过指定的位置。一个将waypoint指定为对象文字与下面显示的字段：
location specifies the location of the waypoint, either as a LatLng or as
将进行地理编码的字符串。       stopover是一个布尔值，表示航点是一个停靠点   在路线上，有效果   将路线分成两条路线。

（有关航点的更多信息，   请参阅下面的路线中使用航点。）

修改

您的路线点对路线无效，即它们在水中 - 尝试将地图置于(12, -33.6)上。

以下是使用路径点的示例（不是最漂亮的代码，但它是一个示例;）。）。

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> var myRouter = { map_: null, directionsHelper_: null, stores: [ {name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)}, {name: "store2", location: new google.maps.LatLng(51.02788, 3.9)} ], calcRoute: function() { var waypts = []; for (var i in this.stores) { waypts.push({ location: this.stores[i].location, stopover:true }); } var request = { origin: new google.maps.LatLng(50.82788, 3.26499), destination: "Antwerp", waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.DRIVING }; var _SELF = this; this.directionsHelper_.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { _SELF.directionsDisplay_.setDirections(response); return; } console.log('Directions Status: ' + status); }); }, init: function(mapid) { this.directionsHelper_ = new google.maps.DirectionsService(); this.directionsDisplay_ = new google.maps.DirectionsRenderer(); var center = new google.maps.LatLng(50.82788, 3.26499); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: center } this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions); this.directionsDisplay_.setMap(this.map_); this.calcRoute(); } }; $(document).ready(function() { myRouter.init('map'); }); </script> <style type="text/css"> #map { height: 500px; width: 600px; border: 1px solid #000; } </style> </head> <body> <div id="map"></div> </body> </html>

Answer 3

根据谷歌文档，航点可以是字符串或LatLng对象。 http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint

这是使用LatLng

的示例

    <!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>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <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(-40.321, 175.54);
        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 waypts = [];


stop = new google.maps.LatLng(-39.419, 175.57)
        waypts.push({
            location:stop,
            stopover:true});


        start  = new google.maps.LatLng(-40.321, 175.54);
        end = new google.maps.LatLng(-38.942, 175.76);
        var request = {
            origin: start,
            destination: end,
            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];

            }
        });
    }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:70%;height:80%;">
        </div>
        <br />
        <div>

        </div>
    </body>
</html>

显示路线的谷歌地图

3 个答案: