1

これは、マークデザインの質問に対するフォローアップの質問です。
マップがモバイルで正しく表示されない（JQuery mobileを使用）
私はjavascriptとjqueryを初めて使用し、上記のリンクにあるMarkDesignの質問への回答で提供されたソリューションを自分のGoogleマップスクリプトに適用できませんでした。Mark Designがこのファイルで行ったのとほぼ同じことを行っています。http： //skool411.info/m/Hawaii-2.html
モバイルデバイスでは、マップが正しく表示されず、写真に示されているのと同じことを行います。上に投稿されたマークデザイン。ここの誰かが「pageshow」と「resize」を適用する方法を教えてもらえますか？また、ajaxをオフにしようとしましたが、うまくいきませんでした： http ://skool411.info/m/Hawaii-1.html
それを正しく行う方法がわからない可能性があります。誰かが私にajaxをオフにする方法を教えてくれるなら、それも素晴らしいでしょう。事前にどうもありがとうございました。

4

1 に答える 1

0

このコンテキストcalcRoute()がないため、エラーが発生します。directionsService

mapまず、Loc1「グローバル」コンテキストに置きましょう。

var map;
var Loc1;

提案された質問の解決策を使用して、ページが表示されたときにマップを作成する必要があります。

$('#mapPage').live('pageshow',
        function(event, ui) {
            var mapOptions = {
                zoom : 7,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                center : Loc1
            };

            map = new google.maps.Map(document.getElementById('map_canvas'),
                    mapOptions);
        });

関数を初期化します：

function initialize(Hlat1, Hlng1, Hlat2, Hlng2) {
    Loc1 = new google.maps.LatLng(Hlat1, Hlng1);

    var $content = $("#mapPage div:jqmData(role=content)");
    $content.height(screen.height);
    $.mobile.changePage($("#mapPage"));

    calcRoute(Hlat1, Hlng1, Hlat2, Hlng2);
}

そして最後に、ルートを計算します。

function calcRoute(Hlat1, Hlng1, Hlat2, Hlng2) {
    var rendererOptions = {
        draggable : true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var directionsService = new google.maps.DirectionsService();

    var request = {
        origin : new google.maps.LatLng(Hlat1, Hlng1),
        destination : new google.maps.LatLng(Hlat2, Hlng2),
        travelMode : google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsDisplay.setMap(map);
        }
    });
}

これが完全なコードです。

お役に立てれば。

于 2012-10-04T21:48:08.753 に答える