Question

我正在开发一个谷歌地图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.");
    }

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

Answer 1

要查看的代码很多。你能建立一个测试页，甚至是fiddle吗？

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

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

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

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

另外，为什么要在这个长度上加1？除此之外，我没有看到代码，但是如果你想要<li>元素的数量，你只需要.length。

我还注意到<input>元素都有id="remScnt"。你不应该多次使用id;使用class或生成唯一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或其他浏览器中的开发者工具解决您遇到的问题现在，那就更好了。值得花些时间探索那里的所有选择。 Start here for a tutorial on the Chrome DevTools

Google会映射未在地图上显示的api v3航路点

1 个答案: