Fatal编程技术网

Javascript 谷歌地图显示路线

javascript google-maps

Javascript 谷歌地图显示路线,javascript,google-maps,Javascript,Google Maps,根据谷歌地图，我可以规划一条跨越多个航路点的路线。这里解释如下：http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes 现在api希望我添加如下航路点： location: waypoints 所以航路点是一个数组，我必须分配给location:参数，但从我在演示中看到的情况来看，它们用位置字符串填充数组。我想知道的是，是否有可能通过纬度和经度而不是字符串 更新：这是我尝

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

现在api希望我添加如下航路点：

location: waypoints
所以航路点是一个数组，我必须分配给location:参数，但从我在演示中看到的情况来看，它们用位置字符串填充数组。我想知道的是，是否有可能通过纬度和经度而不是字符串

更新：这是我尝试创建路线的部分。现在，我已经在整个循环中放置了相同的值，但如果我也使用变量值，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);
        }
    });
}
;
路径点可以是字符串或板条

特别是：

航路点[]（可选）指定 方向航路点数组。 航路点通过路由改变路线 通过指定的位置。A. 航路点被指定为一个对象 具有如下所示字段的文本：

location specifies the location of the waypoint, either as a LatLng or as
将进行地理编码的字符串。 中途停留是一个布尔值，表示航路点是一个停靠点 在路线上，具有以下效果： 将路线拆分为两条路线

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

编辑

您的路线点对路线无效，即它们在水中-尝试将地图居中放置在
（12，-33.6）
上

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


var myRouter={
映射：null，
DirectionHelper:空，
商店：[
{name:“store1”，位置：new google.maps.LatLng（50.82788,3.76499）}，
{名称：“store2”，位置：new google.maps.LatLng（51.02788，3.9）}
],
calcRoute:function（）{
var-waypts=[]；
for（此.stores中的变量i）{
推({
位置：this.stores[i]。位置，
中途停留：对
});
}
var请求={
来源：新google.maps.LatLng（50.82788,3.26499），
目的地：“安特卫普”，
航路点：航路点，
航路点：对，
travelMode:google.maps.Directions travelMode.DRIVING
};
var _SELF=这个；
此.directionHelper_u2;.route（请求、函数（响应、状态）{
if（status==google.maps.directionstatus.OK）{
_自我方向显示设置方向（响应）；
返回；
}
console.log（'方向状态：'+状态）；
});
},
初始化：函数（mapid）{
this.directionsHelper=新建的google.maps.DirectionsService（）；
this.directionsDisplay u=新的google.maps.DirectionsRenderer（）；
var center=newgoogle.maps.LatLng（50.82788,3.26499）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：中心
}
this.map=新的google.maps.map（document.getElementById（mapid），myOptions）；
this.directions显示\设置映射（this.map）；
这是calcRoute（）；
}
};
$（文档）.ready（函数（）{
myRouter.init（'map'）；
});
#地图{
高度：500px；
宽度：600px；
边框：1px实心#000；
}
根据以下内容：

DirectionsWaypoint表示起点和终点之间的位置，行程应通过该位置进行路由

位置LatLng |串航路点 地点。可以是地址字符串或 拉丁。可选的

因此，创建具有lat long值的新航路点应如下所示

return {
    location:new google.maps.LatLng(12.3, -33.6),
    stopover:true
};
根据谷歌的文档，航路点可以是一个字符串或一个LatLng对象。

下面是一个使用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>


谷歌地图JavaScript API v3示例：方向航路点
方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=新google.maps.LatLng（-40.321175.54）；
变量myOptions={
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
calcRoute（）；
}
函数calcRoute（）{
var-waypts=[]；
stop=new google.maps.LatLng（-39.419175.57）
推({
地点：停止，
中途停留：真}）；
start=newgoogle.maps.LatLng（-40.321175.54）；
end=new google.maps.LatLng（-38.942175.76）；
var请求={
来源：start，
目的地:完，
航路点：航路点，
航路点：对，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
}
});
}
好的，我已经这样做了，但是状态一直是零结果，我已经更新了我的帖子以显示我编译路由的函数，也许你可以 
    <!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>