javascript - Google maps api v3 航路点未显示在 map 上-6ren

javascript - Google maps api v3 航路点未显示在 map 上

转载作者：行者123 更新时间：2023-11-30 05:49:23

我正在处理 google maps 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.");
    }

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

最佳答案

要看的代码太多了。你能放一个测试页，甚至是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相反。

在您发布 map 链接后更新...

看看这段代码:

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的值(value)是多少？将会是在这里？另外，稍后你会得到这个:

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

这不可能是对的。这不应该附加到#stops吗？本身？你在嵌套 <li>现在添加元素，这不是您想要的。

最后，使用 Chrome 或其他浏览器中的开发者工具来解决这些问题。 SO 是一个很好的资源，当然，这里的问题总是受欢迎的。但是，如果您可以使用 Chrome 或其他浏览器中的开发人员工具立即解决您遇到的问题，那就更好了。值得花一些时间探索那里可用的所有选项。 Start here for a tutorial on the Chrome DevTools .

关于javascript - Google maps api v3 航路点未显示在 map 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15853170/