-1

GoogleマップAPIを使用して、ユーザーの場所から固定位置までのルートをナビゲートしています。DirectionsServiceを使用してナビゲートしましたが、機能しません。

<script type="text/javascript">

$( "#map-page" ).live( "pageinit", function() {

    var defaultLatLng = new google.maps.LatLng(22.983587,120.22599);  // Default to Hollywood, CA when no geolocation support
    // 建立 DirectionsService 物件
    var directionsService = new google.maps.DirectionsService();


    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                // DirectionsRequest
        var request = {
        origin: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),  // 起點
        destination: new google.maps.LatLng(22.981666,120.194301),  // 終點
        waypoints: [],
        optimizeWaypoints: true, // 路線最佳化
        travelMode: google.maps.TravelMode.WALKING // 交通模式，目前有 開車/步行 以及腳踏車(僅限美國) 三種路線規劃
};

    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var route = response.routes[0];
      // 取得距離
      console.log(route.legs[0].distance.text);
      // 取得從起點至終點的大約時間
      console.log(route.legs[0].duration.text);
    }
});

        }

        function fail(error) {
            console.log(error);
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }

        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map    
    }

    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
    }
    </script>

誰もが何が悪いのか教えてもらえますか、thx

ちなみに私は上記のコードのデモを持っています

http://appkon.com/demo/project2/maps.html

4

1 に答える 1

2

Chrome で JavaScript コンソールを見ると、エラーが表示されます。このリソースは 404 になり、読み込めません: http://appkon.com/demo/JQuery%20Mobile%20%E7%A8%8B%E5 %BC%8F%E7%A2%BC/ch9/maps.js

それがあなたの問題の始まりだと思います。私はそれを修正し、他に何が間違っているかを確認します。これは、Chrome Dev Tools を使用して Maps API をデバッグするための参考動画です: http://www.youtube.com/watch?v=nb4gvrNrDWw

于 2012-08-08T13:43:09.377 に答える