0

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

我正在使用以下脚本切换 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" />

我错过了什么吗？

4

1 回答 1

0

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

所以你的选择可能是

重写你的切换隐藏每次迭代到切换可见状态的东西

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

无论如何，在您启动谷歌地图的那一刻，包装元素不能设置为显示：无

于 2013-10-08T14:41:48.027 回答