Question

我试图在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>

Answer 1

如何处理pageinit事件的documentation与您的方法略有不同 - 至少我正在查看的文档部分。他们的建议是你会这样编码：

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

如果您想以这种方式绑定，文档听起来就像您已将功能放在最佳位置。

修改：

值得注意的是，this particular page完全按照您的描述描述了绑定（但将event添加到匿名函数中，我认为这不会影响您的情况）。这使我相信当您从另一个页面导航时，您的开发人员工具控制台中可能会出现javascript错误，并且页面显示“不工作”的外观。请务必在您选择的开发人员工具中进行检查。

修改：

您的解决方案是，您需要在data-role='page'元素中的某处包含您的Google地图javascript'include'。每次进行AJAX页面加载时，Jquerymobile都会忽略除此之外的所有内容。或者，您可以将此页面中的所有链接转换为data-ajax="false"。

在data-role =“page”中包含以下行，或将其包含在每个页面的html <head>中。

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

一定要真正阅读并让原始链接陷入其中。最佳做法是，每个页面都有相同的<head>元素并包含它而不是复制粘贴它。

Jquery Mobile“pageinit”没有解雇

1 个答案: