2

我正在做一个谷歌地图 v3 项目，我已经到了需要帮助的地步。我有一个谷歌地图，用户可以在其中输入起点和终点，这很好，但是当我出于某种原因想要输入航点时，它们将无法工作（最多 8 个航点）。有人可以看一下代码并帮助我吗？这就是我在项目中取得的进展：

<!DOCTYPE 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="jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="maps.js"></script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
//-->
</script>

</head>
<body onload="initialize()">
<div id="total"></div>
<div id="map-canvas"></div>
    <div id="control_panel">
        <div id="user_input">

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

            <i>Add multiple Stops along the route (Optional)</i><br />
            <ul id="stops">
               <li>
                <label for="stop1">Stop 1:</label>
                <input type="text" id="stop1" name="stop1" />
                </li>
            </ul>
            <input type="button" id="addScnt" value="Add Stop" /><br />

            <label for="end">End :</label>
              <input type="text" id="end" name="end" /><br />
            <br />
              <input type="submit" value="Create Route" onclick="calcRoute();" />
              <input type="button" id="button" value="Show/Hide Directions" onclick="toggle_visibility('directions_panel');" />
        </div>

    </div>
    <div id="directions_panel"></div>
</body>
</html>

这是我的 js 文件：

  $(document).ready(function () {

  var scntUl = $('#stops');
  var ii = $('#stops').size() + 1;
 var MaxInputs = 8;

$('#addScnt').live('click', function () {
    if (ii <= MaxInputs) {

    $('<li><label for="stop' + ii +'">Stop ' + ii + ': </label><input type="text" id="stop' + ii +'" name="stop' + ii + '" /><input type="button" id="remScnt" value="X" /></li>').appendTo(scntUl);
    ii++;
    }
    return false;
});

$('#remScnt').live('click', function () {
    if (ii > 2) {
        $(this).parents('li').remove();
        ii--;
    }
    return false;
 });
}); 

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

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

 }

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

    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: false,
        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 = '';
    }
      computeTotalDistance(response);
    }); 
}

    function computeTotalDistance(result) {
        var totalDist = 0;
        var totalTime = 0;
        var myroute = result.routes[0];
            for (i = 0; i < myroute.legs.length; i++) {
                totalDist += myroute.legs[i].distance.value;
                totalTime += myroute.legs[i].duration.value;      
            }
        var miles = 0.000621371192;

        document.getElementById("total").innerHTML = ("Total distance is: "+ (Math.round( totalDist * miles * 10 ) / 10 ) + " miles " + " and " + " Approximate time is: " + (totalTime / 60 / 60).toFixed(1) + " hours.");
    }

如果有人需要更多信息，请告诉我。谢谢

4

1 回答 1

1

有很多代码要看。你能放一个测试页，甚至是一个小提琴吗？

与此同时，我确实在这里看到了一个问题：

var scntUl = $('#stops');
var ii = $('#stops').size() + 1;

$('#stops')给你一个<ul id="stops">元素本身的 jQuery 对象，而不是它的子元素。length无论您在其中添加多少元素，此对象的 都将为1 <li>。也许你想要$('#stops>li')呢？这将为您提供一个包含所有<li>元素的 jQuery 对象。

（顺便说一句，您可以使用.length属性而不是.size()方法 - 该方法仅用于与旧代码兼容。）

另外，为什么要在该长度上加 1？除此之外，我并没有看太多代码，但是如果您想要<li>元素的数量，您可以直接采用.length。

我还注意到<input>所有元素都有id="remScnt". 你不应该id多次使用；使用 aclass或生成唯一 ID（或两者）。

另一件事 -.live()已弃用；改为使用.on。

发布地图链接后更新...

看看这段代码：

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

这里至少有三四个问题。但是，与其尝试按原样修复此代码，为什么不利用 jQuery 来简化它呢？

首先，返回到#addScnt单击处理程序中的代码，它将每个新的附加<li>到 DOM 中，并将类名添加到<input>标记中，例如

<input class="waypoint" ...and the existing attributes here... />

然后在上面有那个循环的地方，将其更改为：

var waypts = [];
$('.waypoint').each( function( i, input ) {
    var value = $(input).val();
    if( value.length ) waypts.push({ location: value });
});

请注意，此代码不再依赖于具有 ID stop1、stop2等的输入。除非您在其他地方需要这些 ID，否则您可以删除它们。

另外我注意到你仍然有这个代码：

var scntUl = $('#stops>li');
var ii = $('#stops').length;

你认为ii这里的价值是什么？另外，稍后你有这个：

$('<li>...</li>').appendTo(scntUl);

这不可能。这不应该附加到#stops自己身上吗？您现在正在嵌套<li>元素，这不是您想要的。

最后，使用 Chrome 或其他浏览器中的开发者工具来解决这些问题。当然，SO 是一个很好的资源，欢迎在这里提问。但是，如果您可以使用 Chrome 或其他浏览器中的开发人员工具解决您现在遇到的问题，那就更好了。值得花一些时间探索那里的所有可用选项。从这里开始获取有关 Chrome DevTools 的教程。

于 2013-04-06T20:50:50.530 回答