0

これはstackoverflowに関する私の最初の質問なので、優しくしてください:)

jQuery、jQuery mobile、および jQuery-ui-map プラグインを使用してモバイル Web アプリケーションを作成しています。マップを表示する必要があるファイル (map.html) を更新すると、マップは完全に機能しますが、index.html から移動するとまったく表示されません。コンソールにエラーは表示されません。$('#map_canvas').gmap('refresh'); を試してみました pageinit で、それも機能しません。また、ファイルを直接更新すると、パンが台無しになります...

また、フッターメニューでプリフェッチせずに、 data-rel="external" を使用してみました (これにより、jquery モバイルスタイルが台無しになりました)。

index.html のフッター ナビゲーションは次のとおりです。

     <div data-role="footer" data-theme="a" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a data-transition="fade" class="txt_footer_href_home ui-btn-active" href="index.html" data-prefetch>Home</a></li>
                <li><a data-transition="fade" class="txt_footer_href_offers" href="offers.html" data-prefetch>Offers</a></li>
                <li><a data-transition="fade" class="txt_footer_href_store" href="store.html" data-prefetch>Store</a></li>
                <li><a data-transition="fade" class="txt_footer_href_map" href="map.html" data-prefetch>Map</a></li>
                <li><a data-transition="fade" class="txt_footer_href_more" href="more.html" data-prefetch>...</a></li>
            </ul>       
       </div>
    </div>

マップのコードは次のとおりです。

$('#map_canvas').gmap({'maxZoom':17,'center': new google.maps.LatLng(center_latitude,center_longitude),'callback': function() {
    var self = this;
    // Get the current position
    self.getCurrentPosition(function(position, status) {
        // If we got the current position, add the marker
        if ( status === 'OK' ) {
            // Stor current position in a var
            var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            // Add the current position marker
            self.addMarker({ id:'mark_pos','position': clientPosition, 'bounds': true})
            .click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_my_position_content }, this);
            });
            // Paint a blue cirecle where your position is
            self.addShape('Circle', { 
                'strokeWeight': 0, 
                'fillColor': "#008595", 
                'fillOpacity': 0.25, 
                'center': clientPosition, 
                'radius': 15, 
                'clickable': false 
            });
            // Bind direction marker button and show it
            $("#divBtnDirection").show();
            var that = this;
            $("#btn_directions").click(function() {
                that.displayDirections({ 'origin': clientPosition, 'destination':center_latitude+','+center_longitude , 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions') }, function(result, status) {
                if ( status === 'OK' ) {
                    $('#map_canvas').gmap('clear', 'markers');
                    $("#divBtnDirection").hide();
                    $("#directions").fadeIn(1000);

                }
            });  

            });             
    }
        // Add the shopping centers marker

    self.addMarker( { id:'mark_center', 'position': center_latitude+','+center_longitude, 'bounds': true }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_center_content }, this);
            });
    });   


}});

サイトは現在ここに表示されています(ノルウェー語)

ありがとうございました！

4

1 に答える 1

0

まず、Stackoverflow へようこそ..:) ナビゲート中に関数が呼び出されていることを確認してください。関数内にメッセージボックスを入れて確認してみてください。

また、マップ関数の呼び出しを head セクションに入れてみてください

$(function(){
//your function call
});

お役に立てれば..

于 2012-02-03T12:04:47.417 に答える