我有一个谷歌地图,我想用预先填充的路线自动加载(取自一系列 PHP 表单提交)。
目前,PHP 表单在一个页面中达到高潮,该页面上有一个谷歌地图,一些带有起点和终点的下拉框(来自他们以前的 PHP 表单提交),以及下拉菜单上的 onChange 函数计算路线(onChange="calcRoute();"
在下面的示例中)。这很好用,但实际上,每个最终形式最终都只有一个路线选项。因此,让用户“选择”路线的起点和终点是毫无价值的 - 每个下拉菜单中只有一个选项,所以我不妨在页面时自动加载这些选项以及它们之间的计算路线负载。
有没有办法做到这一点?
我的方向功能如下所示:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<?PHP
$Start_latLng = $_POST["start-latitude"] . ", " . $_POST["start-longitude"];
$End_latLng = $_POST["end-latitude"] . ", " . $_POST["end-longitude"];
?>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(54.219218, -2.905669)
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
...我的下拉菜单由 PHP $_POST 函数的结果填充。
显然,我需要等待地图加载,然后才能计算路线,因此可能需要暂停一下 - 有什么想法吗?