谷歌地圖航點問題

我有一個輸入窗體，允許用戶創建一個具有開始，停止和8個航點的路線。一切正常，但我的問題是，所有的輸入必須填寫的路線來呈現。我不知道如何解決這個問題，使用戶可以只輸入：谷歌地圖航點問題

起點和終點，或
起點和終點和航點（儘可能多的，因爲他們需要的，不超過8，創建路線）。

這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title></title> 
<link href="map_style.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(37.09, -95.71); 
    var mapOptions = { 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var stop1 = document.getElementById("stop1").value; 
    var stop2 = document.getElementById("stop2").value; 
    var stop3 = document.getElementById("stop3").value; 
    var stop4 = document.getElementById("stop4").value; 
    var stop5 = document.getElementById("stop5").value; 
    var stop6 = document.getElementById("stop6").value; 
    var stop7 = document.getElementById("stop7").value; 
    var stop8 = document.getElementById("stop8").value; 
    var waypts= [{ location: stop1 }, { location: stop2 }, { location: stop3 }, { location: stop4 }, { location: stop5 }, { location: stop6 }, { location: stop7 }, { location: stop8 }]; 


    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) { 
     directionsDisplay.setDirections(response); 
     var route = response.routes[0]; 
     var summaryPanel = document.getElementById('directions_panel'); 
     summaryPanel.innerHTML = ''; 
     // For each route, display summary information. 
     for (var i = 0; i < route.legs.length; i++) { 
      var routeSegment = i + 1; 
      summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
      summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
      summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
      summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
     } 
     } 
    }); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map-canvas" style="float:left;width:70%;height:100%;"></div> 
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
<div style="margin:20px;border-width:2px;"> 

<label for="start">Start :</label> 
    <input type="text" id="start" name="start" /><br /><br /> 

<i>Add multiple Stops along the route (Optional)</i> <br /><br /> 
<label for="stop1">Stop 1 :</label> 
    <input type="text" id="stop1" name="stop1" /><br /> 
<label for="stop2">Stop 2 :</label> 
    <input type="text" id="stop2" name="stop2" /><br /> 
<label for="stop3">Stop 3 :</label> 
    <input type="text" id="stop3" name="stop3" /><br /> 
<label for="stop4">Stop 4 :</label> 
    <input type="text" id="stop4" name="stop4" /><br /> 
<label for="stop4">Stop 5 :</label> 
    <input type="text" id="stop5" name="stop5" /><br /> 
<label for="stop6">Stop 6 :</label> 
    <input type="text" id="stop6" name="stop6" /><br /> 
<label for="stop7">Stop 7 :</label> 
    <input type="text" id="stop7" name="stop7" /><br /> 
<label for="stop8">Stop 8 :</label> 
    <input type="text" id="stop8" name="stop8" /><br /><br /> 


<label for="end">Stop :</label> 
    <input type="text" id="end" name="end" /><br /> 
<br /> 
    <input type="submit" value="Create Route" onclick="calcRoute();"> 
</div> 
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
</div> 
</body> 
</html>

來源

2013-03-30 im2shae

難道您發佈map_style.css文件 - 需要一些額外的努力，重現你沒有它在做什麼...... – Floris

檢查空字段和重複以前的字段的值出現。渲染時，您將擁有多個航點，但我懷疑您無法看到。這可能是需要對代碼進行最少更改的方法。更廣泛的更改會使表單變爲動態，並在用戶填充時添加更多字段。

下面的代碼片段似乎接近你想要的...我用一個和兩個航點測試它，它表現自己。我還是沒能拿到地圖渲染 - 但我相信這是由於不同的問題，涉及到的.css文件（格式有一點您的評論錯位...）

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value;  
    var waypts = []; 
    for (var ii = 0; ii< 8; ii++) {  
     var thisStop = document.getElementById("stop" + (ii+1)).value; 
     if (thisStop.length > 0) { 
      waypts[ii] = {location: thisStop}; 
     } 
    }

//接下來的幾行被刪除;再次把它撿起來來自：

var request = {

來源

2013-03-30 19:07:29 Floris

我很抱歉，但我真的不明白你在說。我只是學習谷歌地圖。你可以再詳細一點嗎？謝謝 – im2shae

它應該是這樣的：'code' for（var i = 0; i im2shae

請幫幫我。謝謝 – im2shae

谷歌地圖航點問題

回答

相關問題