谷歌地圖Waypoints沒有出現

Question

我是新手到谷歌地圖API，到目前爲止，我遇到了很多問題。

我想從由複選框數組確定的latlng coords映射航點。

這裏是我的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"); 
    } 
}); 

的地圖上顯示了和「映射......」在控制檯加載頁面時彈出。當我按下CalcRoute提交按鈕時，什麼都沒有發生。我記錄了lat/long和waypt對象，所以我知道他們已經到了這一點，但似乎路線從來沒有重新計算過，等等。

我真的只需要一個基本的演示，但我只有一個發現是我用於幾乎所有東西，但我沒有得到任何結果： Google Example Directions Waypoints

Answer 1

目前您的腳本從不會顯示任何路由，因爲您缺少directionsDisplay.setDirections（）的調用來打印路由。

您還應該將directionsService.route（）的調用放入calcRoute函數中。

固定代碼：

<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> 

Answer 2

沒有關於您的Javascript如何與頁面HTML相關的大量信息。但此行

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

也許應該

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

假設你所有的複選框的名稱爲waypoints。

什麼是引號內應該完全匹配的複選框元素的名稱，因此，如果每個複選框的名稱爲waypoint（因爲每個複選框標誌着一個航點，這是一種可能性），那麼你應該使用.getElementsByName("waypoint")找到的所有元素有這個名字。