谷歌地图在浏览器中正常工作，但在 Android 应用程序中不能正常工作

Question

我有一个 phonegap 应用程序，我试图在其中集成 Google 地图来显示。

我正在使用以下脚本切换 div 的可见性（我还在此处添加了地图脚本，以便在显示 div 时进行初始化）：

function showMe( elem ) {
      $$( '.toggle' ).each( function( toggle ) {
        if ( toggle.id == $(elem).id ){
          toggle.show();
          if ( toggle.id == $(contact).id ) {
                    jQuery('#contact').css('visibility', 'visible');
                    var minZoomLevel = 14;

                    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: minZoomLevel,
                        center: new google.maps.LatLng(44.444512, 26.09725),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });
                }                           
          else   jQuery('#contact').css('visibility', 'hidden');
          }
        else
          toggle.hide();

      });
    }

我有四个 div 对应的 id 和一个页脚，我在其中切换 div 的显示：

onclick="showMe('div ID');"

在我试图显示地图的“联系人”div 上，我有以下内容

<div data-role="content" class="toggle" rel="external" id="contact" style="display:block; visibility:hidden;">
            <div class="content_holder">                    
                <div id="map_canvas" style="height:380px; width:auto; margin-left:15px; margin-right:15px;"></div>
            </div>
        </div>

当我在浏览器中加载它时，它可以正常工作，但在我的移动设备上，它只在应该加载地图的 div 中显示一个灰色点。

在我的 config.xml 中我添加了：

<access origin="http://google.com/" />

在 index.html 中，我使用了以下用于 maps api v3 的脚本源：

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

我错过了什么吗？

Answer 1

我知道这个问题，当谷歌地图被绘制到一个没有宽度和高度的元素或一个设置为显示的元素中时会发生：none 当你将它切换到显示：阻止或给它宽度和高度

所以你的选择可能是

要重写您的切换隐藏每个迭代到切换可见状态的东西

它会起作用，但它可能会破坏你的布局，所以我猜你更好的选择是启动谷歌地图，而不是在文档准备好的时候，而是在你将地图容器元素切换到显示（）的那一刻

无论如何，在您启动 Google 地图时，包装元素不会被设置为显示：无