1

我正在制作一个在地图上显示位置的应用程序，我有一个链接到地图的页面，当我单击该链接时，它会在不加载地图的情况下更改为地图页面。

所以我必须点击浏览器后退按钮并刷新有链接的页面，然后我再次点击链接，此时地图已加载，所以如果你能帮助我在不刷新的情况下加载地图，我会感激的

<div data-role="page">
        <div data-role="header">
            <a href="menudep.jsp" data-icon="back" data-theme="c">Atras</a>
            <h1><%=corto%></h1>
            <h4><img src="../images/logo_mich.png" width="40" height="40" /></h4>
            <a href="mobilelaip.html" data-icon="home" data-theme="c">Inicio</a>
        </div>
        <div data-role="content">
            <p>
                <%=descrip%>
            </p>
            <a href="map3.html">Ubicación</a>
            <ul data-role="listview" data-inset="true">

                <li><a href="oficio.jsp?dep=<%=id_dep%>">Info. Oficio</a></li>
                <li><a href="contacto.jsp?dep=<%=id_dep%>" data-rel="dialog">Contacto</a></li>
                <li><a href="paginaweb.jsp?dep=<%=id_dep%>" data-inline="true" data-rel="dialog">Pagina Web</a></li>             

            </ul>
        </div>
    </div>  


     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">
        // When map page opens get location and display map
        $('.page-map').live("pagecreate", function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });

        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 20,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            new google.maps.Marker ( 
            { 
                map : map, 
                animation : google.maps.Animation.DROP,
                position : latlng  
            });
        }
    </script>

map3.html 代码是这样的

<div data-role="page" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Mapa</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;"> 
    <div id="map_canvas" style="width:100%; height:100%;"></div>
</div>

谢谢你的回答

4

2 回答 2

1

关于您的代码的一些事情，其中​​一些可能是一个问题。我不能 100% 确定，因为我只能看到您的部分代码。

从我可以看到您正在使用多个 html 页面来显示您的应用程序。jQuery Mobile 使用 ajax 来加载额外的页面（除非它被关闭），所以加载额外页面的 HEAD 内容是没有意义的，甚至更多，jQuery Mobile只会加载DIV而data-role="page"其他所有内容都将被丢弃。如果您的 javascript 被放置在内容的内部HEAD或末尾BODY，则基本上页面外的任何地方都DIV将被删除。按照这个或这个解决方案来解决这个问题。

我可以看到的其他问题是实时方法，如果在错误的时刻初始化它仍然可以使用（从jQuery 1.9上面删除），它将无法正确触发。所以把它改成这样：

$(document).on('pagecreate', '.page-map', function() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            initialize(position.coords.latitude,position.coords.longitude);
        });
    }
});

第三件事，这一行：

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

必须在 jQuery 和 jQuery Mobile 之前初始化，所以在你的主 html 文件中初始化它。

最后，这是我关于谷歌地图的 jQuery Mobile 实现的博客文章。如果您需要更多信息，请随时发表评论。

于 2013-06-06T20:37:50.787 回答
0

这里有一些我成功使用的示例代码。我使用插件：https ://code.google.com/p/jquery-ui-map/

为了不必刷新，您可以使用“pageshow”事件。

指数

<div data-role="page" id="pagWienerMundo" data-theme="a">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-ui-map.min.js" type="text/javascript"></script>

    <div role="main" class="ui-content">
       <div id="map_canvas">
       </div>
    </div><!-- /content --> 
</div><!-- /page map -->

JAVASCRIPT

$(document).on("pageshow","#pagMap", function () {
    if (!(typeof google === 'object' && typeof google.maps === 'object'))
        $("#map_canvas").empty().append('<h3 style="color:#db393b;text-align:center">Connect to internet</h3>');
    else
    {
        $("#pagWienerMundo [role='main']").css("padding","0em");
        $('#map_canvas').css("width", "100%");
        $('#map_canvas').css("height", "450px");
        $('#map_canvas').gmap().bind('init', function() { 
            $.each( mapObj, function(i, marker) {
                $('#map_canvas').gmap('addMarker', { 
                    'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                    'bounds': true 
                }).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
                });
            });
        });
    }
});

JSON

mapObj=
[
  {
    "content" : "Example text to show on marker",
    "latitude": -32.95845,
    "longitude": -60.66764,

  }
]

假设您在本地和范围内有 json 对象（例如声明为全局）

于 2014-09-10T14:34:11.683 回答