我这里有一个半功能的旅行计划器:
http://roadtripsharing.com/plan-a-road-trip-js/
源代码:
<!DOCTYPE html>
<html>
<head>
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
float: left;
text-align: left;
padding-top: 20px;
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<input id="start" placeholder="Where to begin?" onFocus="geolocate()" type="text" />
<br>
<b>Waypoints:</b>
<br>
<ul style="list-style-type:none; padding: 0; margin: 0;" id="waypoints">
</ul>
<button id="newAutocomplete">Add One</button>
<input type="submit" id="addplace" value="Add One!">
<br>
<b>End:</b>
<br>
<input id="end" placeholder="Where to end?" onFocus="geolocate()" type="text" />
<br>
<input type="submit" id="submit" value="Plan It!">
</div>
<div id="directions-panel"></div>
</div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 39.6,
lng: -106.5
}
});
directionsDisplay.setMap(map);
var start = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('start')), {
types: ['geocode']
});
var end = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('end')), {
types: ['geocode']
});
document.getElementById('addplace').addEventListener('click', function() {
addplace();
});
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
var totalAC = 0;
$(document).on('click', "#waypoints input[type=text]",function () {
var currentInp = $(this).attr("id");
var placeBox = new google.maps.places.Autocomplete(document.getElementById(currentInp));
});
$("#newAutocomplete").click(function(){
totalAC = $("#waypoints input").length;
totalAC = totalAC + 1;
var codeVar = "<li><input id='place" + totalAC + "' placeholder='Come visit!' type='text' /></li>";
$("#waypoints").append(codeVar);
});
<!--
var j=0;
function addplace () {
var node = document.createElement("li"); // Create a <li> node
var textnode = document.createTextNode("<b>Waypoint</b>"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("waypoints").appendChild(node);
}
-->
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, 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>';
}
} else {
window.alert('Error! Do your dots connect?');
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
第一个“添加一个”按钮是一个按钮，第二个是一个输入按钮。我正在使用输入来添加列表项，但自动完成功能不起作用，我在 this question 中得到了建议添加您看到的用于按钮单击的 jQuery。
当我注释掉“添加一个!”时输入“计划它!”输入停止工作。如果您知道为什么会这样，请提前谢谢您。
我的主要问题是旅行计划者没有获取航点并将其包含在 route 。代码应该从 #waypoints 中获取每个项目并将其推送到 waypts 数组中，以允许 Google 进行路由。但当用户提交“Plan It!”时，仅包含起点和终点。输入。如何让航点包含在 route ？
如果有一种方法可以使用输入而不是按钮添加列表项，以便与我的其他输入保持一致，并且有一种无需jquery即可完成此操作的方法，那就太好了，因为我正在学习javascript并发现jquery有点令人困惑除了不以可以推送到 waypts 的方式用项目填充 #waypoints 之外，它似乎正在工作。谢谢。
最佳答案
以下是您需要在 JS 中进行的一些更改，我已经为您做了 -
var waypts = [];
function addplace() {
var inps = $('#waypoints input[type=text]');
for (var i = 1; i <= inps.length; i++) {
var a = $('#waypoints input[type=text]#place'+i);
waypts.push({
location: a.val(),
stopover: true
});
}
}
关于javascript - 新生成的 ul li 输入值没有被插入航点数组/不使用谷歌地图位置自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36551140/