谷歌地图在JQuery Mobile中无休止地加载

时间:2013-05-21 19:50:36

标签: javascript jquery google-maps jquery-mobile

我在我的一个jquery手机页面中使用谷歌地图,而不是在每个页面上加载整个地图javascript文件,我已将它们包含在使用谷歌地图的页面中。

但是当我导航到页面时,加载微调器正在旋转并旋转,但没有任何反应。当我删除gmaps代码时,一切正常。

我使用this plugin所以我的代码看起来像这样:

<div data-role="page" id="page1" data-theme="a">
    <?php include "components/site_header.php"; ?>
    <!-- Scripts for Maps -->
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="library/jquery.ui.map.full.min.js" type="text/javascript"></script>
    <!--.................-->
    <div data-role="content">
               <div id="map_canvas" style="width:100%;height:250px"></div>
                    <script type="text/javascript">
                    $(function() {
                        var LatLng = new google.maps.LatLng(<?=$lat;?>, <?=$lon;?>);
                        $('#map_canvas').gmap({'center': LatLng});
                    });
                    </script>
               </div>
    </div>
</div>

编辑我直接调用网页(通过网址)时代码正常工作。但是当我通过网站浏览它时,它无休止地加载......

EDIT2 让代码生效。删除了我上面提到的插件,并在Jquery和Jquery Mobile JS之前添加了Google Maps JS文件。我的代码现在看起来像这样:

            <div id="map_canvas" style="width:100%;height:250px"></div>
               <script type="text/javascript"> 
               var address = '<?php echo $info['pr_city'].", ".$info['pr_zip'].", ".$info['pr_street'].", ".$info['pr_nr']; ?>';

               var map = new google.maps.Map(document.getElementById('map_canvas'), { 
                   mapTypeId: google.maps.MapTypeId.ROADMAP,
                   zoom: 15
               });

               var geocoder = new google.maps.Geocoder();

               geocoder.geocode({
                  'address': address
               }, 
               function(results, status) {
                  if(status == google.maps.GeocoderStatus.OK) {
                     new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map
                     });
                     map.setCenter(results[0].geometry.location);
                  }
               });
               </script>

0 个答案:

没有答案