2

Jquery Mobile で Geolocation API を使用しようとしています。ブラウザから自分のページを直接参照すると、すべて正常に動作します。

しかし、別のページから移動すると、読み込まれません。

また、「pageinit」コマンドでコード行を削除すると、同じ問題/エラーが発生しますが、ページを更新すると読み込まれます。

AJAXを介してDOMが処理される方法と関係があることは知っていますが、本来の方法で動作させることはできません。

<!DOCTYPE html>
<html>
<head>
    <title>My Location</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

</head>
<body>
    <div data-role="page" id="geoPage">


        <script type="text/javascript">

            $("#geoPage").live("pageinit", function() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(success, error);
                } else {
                    error('Geolocation not supported');
                }
            });

            function success(position) {
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var mapcanvas = $('#mapcanvas');
            var map = new google.maps.Map(mapcanvas[0], myOptions);
            var marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                title:"I am here!"
            });


            //alert(latlng);


            }


            function error(msg) {
                var errMsg = typeof msg == 'string' ? msg : "Geolocation failed";
                $('#msg').html(errMsg);
            }


            $("#continue7").click(function(e){


                $.mobile.changePage( "extension.htm", { transition: "slide"} );


            });
        </script>


        <div data-role="header">
            <h1>My Location</h1>
        </div>
        <div data-role="content">
            <div id="msg"></div>
            <div id="mapcanvas" style="height: 250px; width:250px;"></div>
            <input id="continue7" type="button" value="Conintue" />



        </div>
    </div>
</body>
</html>
4

1 に答える 1

2

pageinit イベントの処理方法に関するドキュメントは、あなたのアプローチとは少し異なります。少なくとも、私が見ていたドキュメントのセクションです。彼らの提案は、次のようにコーディングすることです。

$( document ).delegate("#geoPage", "pageinit", function() {
    // Handle it
}

この方法でバインドしたい場合、ドキュメントは関数を最適な場所に配置したように聞こえました。

編集：

特に、この特定のページは、あなたが示したとおりにバインディングを説明しています（ただしevent、状況に影響を与えるとは思わない匿名関数に追加されます）。これにより、別のページから移動すると、開発者ツール コンソールで JavaScript エラーが発生し、ページが「機能していない」ように見える可能性があると思われます。選択した開発者ツールでそれを確認してください。

編集：

data-role='page'解決策は、要素内のどこかに Google マップの JavaScript 'include' を含める必要があることです。Jquerymobile は、AJAX ページの読み込みを行うたびに、それ以外のすべてを無視します。または、このページへのすべてのリンクを に変更することもできますdata-ajax="false"。

次の行を data-role="page"内<head>に含めるか、すべてのページの html に含めます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

必ずよく読んで、元のリンクを浸透させてください。ベスト プラクティスは、<head>すべてのページに同じ要素を用意し、コピーして貼り付けるのではなく含めることです。

于 2012-04-23T13:41:26.430 に答える