谷歌地图不会显示在 Phonegap iOS 应用程序中

Posted

技术标签:

【中文标题】谷歌地图不会显示在 Phonegap iOS 应用程序中【英文标题】:Google Map won't show in Phonegap iOS App 【发布时间】:2011-12-30 01:56:26 【问题描述】:

我有一个 PhoneGap ios 应用程序,并且这个 html 不会在应用程序中显示地图。我在 Safari 或 FF 中完美地看到了地图,但在应用程序中却看不到。我怎样才能让它工作?

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

    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>  
    <script type="text/javascript">

        $(document).ready(function()
                    var initialLocation = new google.maps.LatLng(37.654,-77.980);
                        var myOptions = 
                                        zoom: 12,
                                        center: initialLocation,
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        ;
                        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            );
</script>   
</head> 
<body>
<div data-role="content">   
    <!--images go here -->
    <div class="img_shadow" style="padding:4px;">
                    <div id="map_canvas" style="height:130px;"></div>
    </div>
</div>      
</div><!-- /page -->

</body>

【问题讨论】:

【参考方案1】:

PhoneGap 有一个针对外部 URL/主机的白名单系统。

来自维基:

此外,最新代码具有新的白名单功能。如果你是 引用外部主机,您必须将主机添加到 “ExternalHosts”键下的PhoneGap.plist。通配符没问题。因此,如果 您正在连接到“http://phonegap.com”,您必须添加 “phonegap.com”到列表中(或使用通配符“*.phonegap.com” 也会匹配子域)。

你上面的代码 sn-p 里面有几个外部主机:

maps.google.com code.jquery.com

也许尝试将“*”添加到 ExternalHosts 以确保这不是问题,然后在它工作后添加更多特定的主机。

【讨论】:

【参考方案2】:

您必须将 Google 地图想要加载的所有内容添加到外部主机列表中。 我添加了以下内容,对我来说效果很好:

*.google.com *.googleapis.com *.gstatic.com

【讨论】:

【参考方案3】:

我遇到了与主机相同的问题,但您的“*.googleapis.com”解决方案有效。但是地图仍然没有出现,因为我没有 API 密钥,这解决了我的问题。希望它对您有所帮助,因为在您的代码中您没有 API 密钥。

【讨论】:

Google Maps Javascript-API 不再需要 API 密钥。

以上是关于谷歌地图不会显示在 Phonegap iOS 应用程序中的主要内容,如果未能解决你的问题,请参考以下文章

iphone上禁用wifi时,Phonegap Sencha应用谷歌地图API未加载

带有地理位置的Phonegap android谷歌地图不起作用

谷歌地图用phonegap放大

通过 PhoneGap 中的短信分享手机地理位置坐标(适用于 Android/IOS)

如何使用 sencha touch 和 phoneGap 构建的谷歌地图提高应用程序的性能?

Phonegap Android(在安卓高清手机上不显示谷歌广告)