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();

      });
    }

我有4个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

我知道这个问题，当Google地图绘制到没有宽度和高度的元素或者设置为显示的元素时，会发生这种情况：当您将其切换为显示：阻止或给它宽度和高度

所以你的选择可能是

要重写您的切换，请将每次迭代隐藏到切换可见状态的某些事情

它会起作用，但它可能会破坏你的布局，所以你想要的更好的选择是启动Google Map而不是文档就绪，但是当你将map-container-element切换为show（）时/ p>

无论如何，在您启动Google地图的那一刻，包装元素我没有设置为显示：无

Google地图在浏览器中正常运行，但在Android应用中无法运行

1 个答案: