如何使用html表单在上一页的lat长度上在谷歌地图上渲染路线?

时间:2012-08-03 09:35:17

标签: php google-maps-api-3 routing draggable html-form-post

我想在google地图上通过上一页的lat长度渲染路线(由html表格发送) 并将接收值放在php隐藏类型上,然后通过jquery拉取值并定义一个开始,结束点 从隐藏类型的值最后调用route函数但它没有显示路径

我尝试在渲染部分设置警报它工作正常但不显示路线。我不知道为什么

这是我的代码

<?php
//get lat long from previous page html form
    $press = $_POST["send"];
    $lat1 = $_POST["lat1"];
    $long1 = $_POST["long1"];
    $lat2 = $_POST["lat2"];
    $long2 = $_POST["long2"];



?>

<!DOCTYPE html>
<head>     
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my_key&sensor=false"></script> 


<script type="text/javascript">


    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var rendererOptions = {draggable: true}; //define dragble direction
    function initialize() { 
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
        var center = new google.maps.LatLng(13.76493,100.5383);  

        var mapOptions = {    
            zoom:7,    
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: center
             }        
             map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //render map
       calcRoute(); //call route function
        }

    function calcRoute()
    {//get lat long from hidden type 
    $(document).ready(function(){
       var lat1 = $("#lat1").val();
       var long1 = $("#long1").val();
       var lat2 = $("#lat2").val();
       var long2 = $("#long2").val(); 

    var start = new google.maps.LatLng(lat1,long1);//define start point
    var end = new google.maps.LatLng(lat2,long2);//define end point
        var request = {    
            origin:start,    
            destination:end,    
            travelMode: google.maps.DirectionsTravelMode.DRIVING  
            };  

        directionsService.route(request, function(result, status) { 
            if (status == google.maps.DirectionsStatus.OK) {  
                 directionsDisplay.setDirections(result);  
                 alert("DO");  //it's show alert when redirect from previous page
                }
            });
        });
    }

</script>  
</head>
<body onload="initialize()"> 
<div id="map_canvas" style="width:500px; height:400px"></div>
<?php
    //put value from previous page on hidden type
    echo "<input type='hidden' id='lat1' value='$lat1'>";
    echo "<input type='hidden' id='long1' value='$long1'>";
    echo "<input type='hidden' id='lat2' value='$lat2'>";
    echo "<input type='hidden' id='long2' value='$long2'>";
?>

0 个答案:

没有答案