带有Rhomobile的Google Maps Javascript V3 API

Question

我正在尝试在Rhomobile中加载Google Map javascript V3 API。 但无法做到。 我在map.erb中使用了以下代码：

<div data-role="header" data-position="inline">
  <h1>Login</h1>
</div>

<div data-role="content">
  <form method="POST" action="<%= url_for :action => :do_login %>">
    <% if @msg %>
        <div class="error-message"><%= @msg %></div>
    <% end %>

    <div data-role="fieldcontain">
      <label for="login" class="itemLabel">Login</label>
      <input type="text" id="login" name="login" class="itemValue" <%= placeholder("Login") %> />
    </div>
    <div data-role="fieldcontain">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" class="itemValue" <%= placeholder("Password") %> />
    </div>
    <input type="submit" value="Login"/>
  </form>
</div>
<ul>
  <li>
    <a href = "<% url_for :action =>:map_it %>">
      <span class="title">Show On Map</span>
      <span class="disclosure_indicator"></span>
    </a>

  </li>
  <li>
        <a href = "<% url_for :action =>:myMaps %>">
                          <span class="title">Show On Map</span>
                          <span class="disclosure_indicator"></span>
                        </a>
  </li>
</ul>

并使用控制器将其命名。 但是，当我单击重定向到map.erb的链接时，没有任何反应。

Rholog.txt的输出

    I 02/03/2014 18:45:50:322 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb
    I 02/03/2014 18:45:50:364 00001834           HttpServer| Process URI: '/public/api/rhoapi-modules.js'
    I 02/03/2014 18:45:50:373 00001834           HttpServer| Process URI: '/public/jquery/jquery-1.9.1.min.js'
    I 02/03/2014 18:45:50:496 00001834           HttpServer| Process URI: '/public/jqmobile/jquery.mobile-1.3.1.min.css'
    I 02/03/2014 18:45:50:529 00001834           HttpServer| Process URI: '/public/css/jqmobile-patch.css'
    I 02/03/2014 18:45:50:530 00001834           HttpServer| Process URI: '/public/jqmobile/jquery.mobile-1.3.1.min.js'
    I 02/03/2014 18:45:50:537 00001834           HttpServer| Process URI: '/public/js/jqmobile-patch.js'
    I 02/03/2014 18:45:50:538 00001834           HttpServer| Process URI: '/public/css/android.css'
    I 02/03/2014 18:45:50:654 00001834           HttpServer| Process URI: '/public/jqmobile/images/icons-18-white.png'
    I 02/03/2014 18:45:50:682 00001834           HttpServer| Process URI: '/favicon.ico'
    E 02/03/2014 18:45:50:684 00001834           HttpServer| The file /favicon.ico was not found
    I 02/03/2014 18:45:50:708 00001b50         QtMainWindow| Page load complete.
    I 02/03/2014 18:45:52:079 00001834           HttpServer| Process URI: '/app/Settings/login'
    I 02/03/2014 18:45:52:272 00001834                  APP| RHO serve: /app/Settings/login
    E 02/03/2014 18:45:52:437 00001834              RhoRuby| require_compiled: error: can not find Settings/settings_controller
    I 02/03/2014 18:45:52:605 00001834              RhoRuby| require_compiled: Settings/controller
    I 02/03/2014 18:45:52:844 00001834              RhoRuby| require_compiled: helpers/browser_helper
    I 02/03/2014 18:45:52:943 00001834                  APP| eval_compiled_file : F:/RubyMapsWRKSPC/MyRhodesV3Maps/app/Settings/login.erb
    I 02/03/2014 18:45:52:947 00001834           HttpServer| GC Start.
    I 02/03/2014 18:45:52:948 00001834           HttpServer| GC End.
    I 02/03/2014 18:45:52:970 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb#/app/Settings/login
    I 02/03/2014 18:45:54:789 00001834           HttpServer| Process URI: '/app/Settings/myMaps'
    I 02/03/2014 18:45:54:790 00001834                  APP| RHO serve: /app/Settings/myMaps
    E 02/03/2014 18:45:54:791 00001834              RhoRuby| require_compiled: error: can not find Settings/settings_controller
    I 02/03/2014 18:45:54:793 00001834                  APP| eval_compiled_file : F:/RubyMapsWRKSPC/MyRhodesV3Maps/app/Settings/map.erb
    I 02/03/2014 18:45:54:794 00001834           HttpServer| GC Start.
    I 02/03/2014 18:45:54:796 00001834           HttpServer| GC End.
    I 02/03/2014 18:45:54:801 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb#/app/Settings/myMaps
    I 02/03/2014 18:47:31:140 00001b50            RhodesApp| callAppActiveCallback
    I 02/03/2014 18:47:31:141 00001b50         AppCallbacks| addCommand: APP-DEACTIVATED
    I 02/03/2014 18:47:31:142 00001b50                  Net| Method: GET;Url: http://127.0.0.1:62125/system/deactivateapp
    I 02/03/2014 18:47:31:142 00001be8         AppCallbacks| process command: APP-DEACTIVATED
    I 02/03/2014 18:47:31:143 00001be8         AppCallbacks| ThreadQueue blocked for 4294967295 seconds...
    I 02/03/2014 18:47:31:145 00001834           HttpServer| Process URI: '/system/deactivateapp'
    I 02/03/2014 18:47:31:145 00001834                  APP| AppEvent Deactivated

编辑：我已经更改了完整程序。 这在RhoSimulator中不起作用，但是在手机（Android）上起作用。 我在手机上面临的唯一问题是，当我转到地图屏幕时，地图没有加载。 但是，当我刷新屏幕时，它正在加载。 map.erb：-

 <div data-role="header" data-position="inline">
   <h1>Maps</h1>
 </div>

 <div data-role="content" id="pageMaps">
  <script type="text/javascript"> 
  $(function{alert("test");}) 
  </script> 
    <script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=true"> 
    </script> 
    <script type="text/javascript"> 
    alert("Hello");
         function initialize() { 
        var latlng = new google.maps.LatLng(-34.397, 150.644); 
        var myOptions = { 
          zoom: 8, 
          center: latlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        var map = new 
    google.maps.Map(document.getElementById("map_canvas"), 
            myOptions); 
      } 

      $('#pageMaps').live('pageshow', function(){
        initialize();
      });

    </script> 
    <div id="map_canvas" style="width:200px; height:300px;"></div> 
 </div>

controller.rb

def myMaps
  @msg = "Map is loading."
  render :action => :map
end

以及login.erb中的链接

        <div data-role="content">
           <ul data-role="listview">
             <li><a href="<%= url_for :action =>:myMaps %>">Maps</a></li>
           </ul>
         </div>

Answer 1

我认为仅在重新加载map.erb页面时才获得地图页面是由于jQuery Mobile使用AJAX加载页面的方式。

您可以使用login.erb中的data-ajax =“ false”强制完全重新加载页面：

<div data-role="content">
  <ul data-role="listview">
    <li><a href="<%= url_for :action =>:myMaps %>" data-ajax="false">Maps</a></li>
  </ul>
</div>

看看jQuery Mobile文档了解更多信息。