Google maps 谷歌地图航路点未显示

我是谷歌地图API的新手，到目前为止，我遇到了很多问题

我正试图从由一系列复选框确定的latlng坐标映射航路点

以下是我的js文件全文：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


var waypts = [];
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

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

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");


    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }
}

var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    console.log("mapping...");

    if(status == google.maps.DirectionsStatus.NOT_FOUND)
    {
        console.log("Could not one or more of locations");
    }
});

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var-waypts=[]；
var start=new google.maps.LatLng（41.850033，-87.6500523）；
var end=new google.maps.LatLng（40.850033，-87.6500523）；
函数初始化（）
{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量myOptions={
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（41.850033，-87.6500523）
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）
{
var checkboxArray=document.getElementsByName（“航路点[]”）；
对于（var i=0；i

当页面加载时，将显示地图并在控制台中弹出“映射…”。当我按下calcRoute提交按钮时，什么也没有发生。我已经记录了lat/long和waypt对象，因此我知道他们正在到达该点，但似乎路线从未重新计算过，等等

我真的只需要一个基本的演示，但我找到的唯一一个是我几乎用过的所有东西，但我没有得到任何结果：

---

关于Javascript与HTML页面的关系，没有太多的信息。但是这条线

var checkboxArray = document.getElementsByName("waypoints[]");

应该是

var checkboxArray = document.getElementsByName("waypoints");

假设您的所有复选框都有名称

航路点

---

引号内的内容应与复选框元素的名称完全匹配，因此，如果每个复选框都有名称

航路点

（因为每个复选框都标记一个航路点，这是可能的），则应使用

.getElementsByName（“航路点”）

查找具有该名称的所有元素。

关于Javascript与HTML页面的关系，没有太多信息。但是这条线

var checkboxArray = document.getElementsByName("waypoints[]");

应该是

var checkboxArray = document.getElementsByName("waypoints");

假设您的所有复选框都有名称

航路点

---

引号内的内容应与复选框元素的名称完全匹配，因此，如果每个复选框都有名称

航路点

（因为每个复选框都标记一个航路点，这是可能的），则应使用

.getElementsByName（“航路点”）

查找具有该名称的所有元素。

当前，您的脚本不会显示任何路由，因为您缺少对directionsDisplay.setDirections（）的调用以打印路由

您还应该将directionsService.route（）的调用放入CalCrout函数中

固定代码：

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

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

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");
    var waypoints=[];

    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }


var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    if(status == google.maps.DirectionsStatus.OK)
    {
        //print the route
        directionsDisplay.setDirections(response);
    }
    else
    {
      console.log('something went wrong',status);
    }

});
}
</script>

方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var start=new google.maps.LatLng（41.850033，-87.6500523）；
var end=new google.maps.LatLng（40.850033，-87.6500523）；
函数初始化（）
{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量myOptions={
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（41.850033，-87.6500523）
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）
{
var checkboxArray=document.getElementsByName（“航路点[]”）；
var航路点=[]；
对于（var i=0；i

当前，您的脚本永远不会显示任何路由，因为您缺少directionsDisplay.setDirections（）打印路由的调用

您还应该将directionsService.route（）的调用放入CalCrout函数中

固定代码：

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

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

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");
    var waypoints=[];

    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }


var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    if(status == google.maps.DirectionsStatus.OK)
    {
        //print the route
        directionsDisplay.setDirections(response);
    }
    else
    {
      console.log('something went wrong',status);
    }

});
}
</script>

方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var start=new google.maps.LatLng（41.850033，-87.6500523）；
var end=new google.maps.LatLng（40.850033，-87.6500523）；
函数初始化（）
{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量myOptions={
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（41.850033，-87.6500523）
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）
{
var checkboxArray=document.getElementsByName（“航路点[]”