jQueryMobile上的gmaps4rails不起作用 [英] gmaps4rails on jQueryMobile don't work

问题描述

我在jQueryMobile Framework上尝试了gmaps4rails。

一页仅链接到gmaps页面。
两页是gmaps4rails页面。

启用了jQueryMobile ajax页面。
从一页到两页不显示gmaps。
但两页直接访问是成功显示gmaps。

这是我的存储库。
https://github.com/y-hirasawa/sample-jqm-map

我想使用ajax页面，并显示gmaps。
帮助我。

解决方案

• 您需要将Googlemaps JavaScript文件包含在布局中：
  $ b

  
  

   < script type =text / javascript SRC = http://maps.google.com/maps/api/js?v=3.5&sensor=false&amp;libraries=geometry >< /脚本> 
  < script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js >< /脚本> 
  < script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js >< /脚本> 
  < script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js> ;< /脚本> 
    

  
  

  
  
  

  
  
  • 一个 window.onload 回调。由于该页面已经加载，因此失败。所以你必须在你的 application.js 中添加一个jquery移动回调函数：
    
    
    

    
    

    $（'＃gmaps'）。live（'pageshow'，function（event）{

      Gmaps.loadMaps（）; 
      

    }）;

    
    
    
    
    
    • 如果您想使用此功能，您必须将ID设置为包含Google地图的页面：
    
    ul>
    
    

    
    

     < div class =pagedata-role =pageid =gmaps> ; 
      

    
    

    
    
    

    
    
    • 最后，您必须防止双重加载脚本，因此请将您的调用更改为 gmaps4rails 帮助程序：
      
    
    
    

    
    

    <％= gmaps4rails（@json，false，false）％>

    
    

    
    

    I tried gmaps4rails on jQueryMobile Framework.

    One page is only link to gmaps page. Two page is gmaps4rails page.

    jQueryMobile ajax page enabled. From one page to two page don't display gmaps. But Two page direct access is success display gmaps.

    This is my repository. https://github.com/y-hirasawa/sample-jqm-map

    I want to use ajax pages, and display gmaps. Help me.

    解决方案

    • You need to include the googlemaps javascript files in your layout:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&amp;libraries=geometry"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
    

    • the map is created thanks to a window.onload callback. Since the page is already loaded, it fails. So you have to add a jquery mobile callback in your application.js:

    $('#gmaps').live('pageshow',function(event){

      Gmaps.loadMaps(); 
    

    });

    • If you want this to work, you have to set an id to the page containing the google map:

    <div class="page" data-role="page" id="gmaps">
    

    • Last, you must prevent double loading of scripts, so change your call to the gmaps4rails helper:

    <%= gmaps4rails(@json, false, false) %>

    这篇关于jQueryMobile上的gmaps4rails不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！