无法在directionService中实现地理编码器 - Google maps API

时间:2014-04-12 20:18:44

标签: javascript google-maps google-maps-api-3 google-geocoder google-direction

我刚开始使用Google Maps API进行开发,所以我经常会看到一些错误。现在我在方向服务中实现地理编码器时遇到了问题。 例如,我有这个错误:

Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or 

LatLngLiteral: not an Object main.js:13
(anonymous function) main.js:13
QQ VM2948:2
WQ VM2948:9
VQ VM2948:7
(anonymous function) VM2948:10
V main.js:25
OQ.(anonymous function).ji VM2948:10
(anonymous function) main.js:35
V main.js:25
Mg.(anonymous function).route main.js:35
calcRoute new%20%205.html:67
onchange

这是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Travel modes in directions</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    </head>
    <body>

        <?php
        $adress = 'Ozolciema iela 18';
        $adress2 = 'Terbatas iela 73';
        ?>
        <div id="panel">
            <b>Mode of Travel: </b>
            <select id="mode" onchange="calcRoute();">
                <option value="DRIVING">Driving</option>
                <option value="WALKING">Walking</option>
                <option value="BICYCLING">Bicycling</option>
                <option value="TRANSIT">Transit</option>
            </select>
        </div>
        <div id="map-canvas"></div>
        <script>
            var geocoder;
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            var haight = geocodeFromAdress(<?php echo json_encode($adress); ?>, 'aaa');
            var oceanBeach = geocodeFromAdress(<?php echo json_encode($adress2); ?>, 'aab');


            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapOptions = {
                    zoom: 12,
                    center: haight
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
            }
            function geocodeFromAdress(address, title) {
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {

                        var latLng = results[0].geometry.location;
                        alert(latLng);
                        return latLng;
                        //addMarkerFromAdress(latLng, title);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }



            function calcRoute() {
                geocoder = new google.maps.Geocoder();
                var haight = geocodeFromAdress(<?php echo json_encode($adress); ?>);
                var oceanBeach = geocodeFromAdress(<?php echo json_encode($adress2); ?>);

                var selectedMode = document.getElementById('mode').value;
                var request = {
                    origin: haight,
                    destination: oceanBeach,
                    // Note that Javascript allows us to access the constant
                    // using square brackets and a string value as its
                    // "property."
                    travelMode: google.maps.TravelMode[selectedMode]
                };
                directionsService.route(request,
                        function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                            }
                        });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </body>
</html>

我的任务是创建一个地图,显示从位置(当前位置)到地址(将从数据库中检索)的路线,人们可以一次选择运输。如果应用程序无法获得用户的当前位置,则用户可以输入他/她的位置。那么也许有人可以帮我解决这个问题?

0 个答案:

没有答案