从googlemaps自动填充获取输入

时间:2013-11-27 15:32:17

标签: javascript html google-maps autocomplete

如果输入是硬编码的,通常会显示方向。问题是,我想要自己的方向,谷歌理解我使用自动完成,所以输入将是可识别的格式。事情是,当我点击发送我的指示时,我正在获得不同的变量(警报显示)。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    </head>

<body onload="">
    <div style="width: 600px;">
    <form onsubmit="return myF()"> 
    From:<input id="searchTextField" type="text" size="30">
    To:<input id="searchTextField1" type="text" size="30">
    <input type="submit" value="Sent" />
        <div id="googleMap" style="width: 500px; height: 380px;"></div>
        </form>
    </div>


    <script type="text/javascript">


var d1 = new google.maps.DirectionsRenderer();
var d2 = new google.maps.DirectionsService();

var ori = new google.maps.LatLng(48.508742, 12.120850);
var des = new google.maps.LatLng(42.508742, 13.120850);

function initialize() {
    var map = new google.maps.Map(document.getElementById('googleMap'), {
        zoom : 8,
        center:ori,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    d1.setMap(map);
    }



function myF(){

var map = new google.maps.Map(document.getElementById('googleMap'), {
            zoom : 8,
            center:ori,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        d1.setMap(map);
        var input = document.getElementById('searchTextField');
               var input1 = document.getElementById('searchTextField1');

        var au = new google.maps.places.Autocomplete(input);
        var au1 = new google.maps.places.Autocomplete(input1);

        alert(au.value);

        var req = {
                origin: ori,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
        };


         d2.route(req, function(response, OK) {

             d1.setDirections(response);

         });
        return false;
    }  
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

0 个答案:

没有答案