Question

我在电话节目leason中差不多两个月了。我一直在谷歌涟漪模拟器中测试应用程序，一切都与谷歌地图工作得很好。

然而，当我将此项目上传到phonegap版本并将其安装到我的Android设备中时，谷歌地图并没有显示出来。

这是我的index.html

<html> 

    <head>        

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />


        <script src="lib/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <link href="css/all.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" charset="utf-8">
            window._cordovaNative = true; 
        </script>

        <script type="text/javascript" charset="utf-8">

            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() 
                {
                    //navigator.geolocation.getCurrentPosition(onSuccess, onError);
                    var map = new GoogleMaped(); 
                    map.initialize(); 
                }


                function GoogleMaped()
                    {
                        this.initialize = function(){
                            var map = showMap();
                    }


                         var showMap = function(){
                            var mapOptions = 
                                {
                                    zoom: 4,
                                    center: new google.maps.LatLng(55.689403, 12.521281),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                }    
                            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);    


                            return map;
                        }
                    }  

                $(document).ready(function(){
                    alert("hi al"); 
                });

        </script>



    </head>

    <body>

    <div id="phonegapWrapper" style="">

        <div id="map_canvas">
        </div>

    </div> 
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

这是我的config.xml

  <?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id          = "com.empatix.app"
        versionCode = "10" 
        version     = "1.0.0" >


  <plugin name="cordova-plugin-whitelist" />

  <plugin name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb" />
    <!-- versionCode is optional and Android only -->
  <feature name="http://api.phonegap.com/1.0/network"/>

  <feature name="http://api.phonegap.com/1.0/device"/>
  <feature name="http://api.phonegap.com/1.0/geolocation"/>
  <feature name="http://api.phonegap.com/1.0/notification"/>

  <access origin="*"/>

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

  <access origin="http://maps.google.com" />
  <access origin="http://maps.google.com/*" />
  <access origin="http://*.google.com" />
  <access origin="http://dev.hospitalku.com/*" />

  <access origin="http://code.jquery.com/*" />
  <access origin="https://maxcdn.bootstrapcdn.com/*" />
  <access origin="https://maxcdn.bootstrapcdn.com/*" />


  <access origin="*" />
  <access origin="*.google.com"/>
  <access origin="*.googleapis.com"/>
  <access origin="*.gstatic.com"/>

  <allow-navigation href="*" />
  <allow-navigation href="http://*/*" />
  <allow-navigation href="https://*/*" />
  <allow-navigation href="data:*" />

  <allow-intent href="geo:*" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="*" />

    <name>Empatix App</name>

    <description>
        An example for phonegap build docs. 
    </description>

    <author href="https://dev.hospital.com" email="al_kasih@outlook.com">
        Hardeep Shoker 
    </author>

   <access origin="http://phonegap.com" subdomains="true" />



</widget>

我在phonegap调试服务中获得的唯一控制台消息是：

找不到Content-Security-Policy元标记。请在使用cordova-plugin-whitelist插件时添加一个。

有人可以帮帮我吗？

非常感谢提前。

Answer 1

您必须在index.html（主要部分）中添加此行：

<meta http-equiv="Content-Security-Policy" content="default-src ...">

有关详细说明，请查看此文档：

https://github.com/apache/cordova-plugin-whitelist#content-security-policy

SO上的帖子："No Content-Security-Policy meta tag found." error in my phonegap application

Answer 2

我制作了一个使用此Cordova plugin for Google Maps的Android应用程序。它是另一种解决方案替代方案，但它对我有用，所以，你可以尝试一下。我更喜欢这种方法，因为插件使用本机代码，而且性能会更好，更快。此外，它有一个很好的文档; Cordova和Phonegap是相同的几乎。如果你使用这个插件，你将避免在config.xml上添加带GMase访问标记的条目，它会更清晰。

安装

phonegap plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="ANDROID_API_KEY" --variable API_KEY_FOR_IOS="IOS_API_KEY"

如果您对Phonegap CLI有疑问，请阅读此link。

设置

HTML：

<div id="map" style="width:100%;height:100%"></div>

使用Javascript：

var map = plugin.google.maps.Map.getMap(document.getElementById("map"));
map.one(plugin.google.maps.event.MAP_READY, function () {
       var DEFAULT_MAP_TYPE = plugin.google.maps.MapTypeId.HYBRID
       map.setMapTypeId(DEFAULT_MAP_TYPE);
});

重要：必须在运行之前对应用程序进行签名，SHA1哈希必须与Google Maps API for Android中注册的哈希一致。但是，如果您使用iOS，则不需要这样做。

Answer 3

您应该在文档准备好后添加deviceready listener：

  $(document).ready(function () {
         document.addEventListener("deviceready", onDeviceReady, true); 
    });

    function onDeviceReady() {
        alert ('123');
    }

Answer 4

尝试在头部

中添加内容，将网址列入白名单

function FocusOnInput() {
    var element = document.getElementById('txtContactMobileNo');
    element.focus();
    setTimeout(function () { element.focus(); }, 1);
}

找到此index.html以实现相同的功能

 <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ https://maps.google.com/maps/api/js 'unsafe-inline' 'unsafe-eval'">

Google地图并未显示在Phonegap Build中

4 个答案:

安装

设置