谷歌地图显示路线答案

【问题标题】：google maps displaying a route谷歌地图显示路线
【发布时间】：2011-07-22 12:10:51
【问题描述】：

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

现在 api 要我像这样添加航点：

location: 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);
        }
    });
}
;

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

根据API reference：

DirectionsWaypoint 表示行程应经过的起点和目的地之间的位置。

位置 LatLng|string 航点地点。 可以是地址字符串或纬度。可选

所以创建一个新的 Waypoint 的 lat-long 值应该如下所示

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

【讨论】：

好的，我已经这样做了，但状态一直显示为零结果，我已经更新了我的帖子以显示我编译路线的功能，也许你可以看看是否有问题？这只是代码的最后一部分，因为除了这部分之外，其他一切都正常工作。
我输入值 (12.3, -33.6) 只是为了展示如何创建新点的示例 - 就像 Jonathan 在上面指出的那样，这些坐标位于大西洋中部！这可能就是你没有得到任何结果的原因。此外，在您的代码示例中，您的起点和终点是相同的，这是设计使然，对吧？

【解决方案2】：

根据谷歌文档，航点可以是字符串或 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】：

路点可以是字符串或纬度。

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

特别是：

waypoints[]（可选）指定一个 DirectionsWaypoints 数组。航点通过路由改变路线通过指定的位置。一种航点被指定为对象文字字段如下所示：
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>

【讨论】：