logo标签列表

谷歌地图在Phonegap Build中无法显示

androidcordovagoogle-maps
3

我刚开始学习PhoneGap大约两个月。我一直在Google Ripple模拟器中测试应用程序，谷歌地图一切都很好。

然而，当我将这个项目上传到PhoneGap Build，并将其安装到我的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插件时，请添加一个。

有人能帮我解决这个问题吗？

非常感谢提前。

4个回答
0

我制作了一个使用Cordova plugin for Google Maps的Android应用程序。这是另一种解决方案，但对我很有效，所以你可以尝试一下。我更喜欢这种方法，因为该插件使用本地代码，因此性能更好、更快。此外，它有出色的文档；Cordova和Phonegap基本上是相同的。如果你使用该插件，你将避免在config.xml中添加那些访问GMaps的条目，这样会更清晰。

安装

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，则不需要此操作。

0

在文档准备就绪后，您应该添加deviceready监听器：

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

    function onDeviceReady() {
        alert ('123');
    }
0
尝试通过在头部区域添加以下内容来添加URL白名单： 

 <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'">

查找此 index.html 文件以实现相同的功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
<style>
    body, html, #map {  margin: 0;width:100%;height:400px }
#map {
    position: relative;
    width:400px;
    height: :50%;
}

#map:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
   pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

    </style>



   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>


    <script type="text/javascript">
        function initialize() {
          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(55.689403, 12.521281),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }



    </script>
  </head>
  <body>
    <div id="map"></div>

  </body>
</html>
0
我刚刚发现问题是onDeviceReady和所有的cordova插件在那段代码中都无法工作。你能帮忙解决吗？ - Al Kasih
那么 onDeviceReady 从未被调用？ - beaver
你是否按照 http://docs.build.phonegap.com/en_US/3.1.0/introduction_getting_started.md.html 上的指示进行操作？已删除 phonegap.js（将由构建过程注入）... - beaver
也许尝试将<script type="text/javascript" src="phonegap.js"></script>移动到头部部分。 - beaver
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接