我有这个脚本在我的sql db中只显示地图上的源和目标(A和B),我想在目标路由上设置多个标记(destionations)。从A到B - > C-> D-> ..等等,如果可能的话,地图目的地自动加载,我不必使用“点击”#39;事件。需要一些帮助。谢谢!
Javascript代码:
<script type="text/javascript">
function initMap() {
var lat_lng = {lat: 45.30000, lng: 24.0817263};
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: lat_lng
});
directionsDisplay.setMap(map);
google.maps.event.trigger(map, 'resize');
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('Source').addEventListener('click', onChangeHandler);
document.getElementById('Destination').addEventListener('click', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('Source').value,
destination: document.getElementById('Destination').value,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Request for getting direction is failed due to ' + status);
}
});
}
$('a[data-toggle="tab"]')['on']('shown.bs.tab',function(event){
google.maps.event.trigger(map, 'resize');
});
</script>
Html&amp; Php代码:
<div class="tab-pane fade" id="tab_3">
<?php
$db = mysqli_connect("localhost", "root", "", "");
$qz = mysqli_query($db,"SELECT * FROM tours WHERE id = ".$_GET["id"]."");
while ($row = mysqli_fetch_assoc($qz)) {
$source= $row['source'];
$destination= $row['destination'];
?>
<b>Source: </b>
<select id="Source">
<option value="<?php echo $source; ?>, in"><?php echo $source; ?></option>
</select>
<b>Destination: </b>
<select id="Destination">
<option value="<?php echo $destination; ?>, in"><?php echo $destination; ?></option>
</select>
<div id="map"></div>
<!-- end map-->
</div>
<?php } ?>
<!-- End tab_3 -->