如何获取cordova的googlemap api密钥

时间:2016-11-18 02:21:09

标签: javascript android ios cordova google-maps

我是科尔多瓦的初学者。 我有一个问题,以显示谷歌地图 我可以使用javascript在网站上显示谷歌地图。 我也可以使用java和xcode显示谷歌地图。

但不确定如何显示使用cordova。因为它是javascript + html。

所以我可以像下面的代码那样编写代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

当然,它在Web浏览器上运行良好。我的问题是我应该使用什么样的钥匙?

我第一次使用javascript键。但它不适用于ios和android。我想在android上运行我应该使用andorid键。但如果是,我怎么能得到sha足迹密钥。在ios上也是如此。没有这个我无法获得Android谷歌地图API密钥。我试图找到解决方案但很多视频和文档,如果我使用javascript api密钥,它运行良好。但事实并非如此。我确定。如果是,我们如何获得密钥?第二个是将android和ios密钥插入javascript代码吗?

请帮帮我。感谢。

1 个答案:

答案 0 :(得分:0)

  

我的问题是我应该使用什么样的钥匙?

您应该为应用所使用的任何设备使用正确的API密钥。

如果您前往Google Developer Console,请创建一个帐户,如果您还没有去过&gt;凭证&gt;创建凭据并选择API密钥。 创建你需要的任何东西,Android,iOS等。

  

加载脚本

您确实应该检查用户的互联网连接,以便在应用heres a tutorial for that中加载外部脚本。

基本上使用cordova-plugin-network-information检查用户连接状态,如果已连接,请加载地图脚本。

(function (global) {
    "use strict";

    function onDeviceReady () {
        document.addEventListener("online", onOnline, false);
        document.addEventListener("resume", onResume, false);
        loadMapsApi();
    }

    function onOnline () {
        loadMapsApi();
    }

    function onResume () {
        loadMapsApi();
    }

    function loadMapsApi () {

        var API_KEY;

        if ( device.platform === 'Android') {
          API_KEY = 'youAndroidAPIkey';
        } else if ( device.platform === 'iOS') {
          API_KEY = 'youriOSAPIkey';
        }

        if(navigator.connection.type === Connection.NONE || google.maps) {
            return;
        }
        $.getScript('https://maps.googleapis.com/maps/api/js?key='+API_KEY+'&sensor=true&callback=onMapsApiLoaded');
    }

    global.onMapsApiLoaded = function () {
        // Maps API loaded and ready to be used.
        var map = new google.maps.Map(document.getElementById("map"), {});
    };

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

编辑-------------

我最初使用cordova-google-maps和恕我直言,因为我在商业应用程序中使用它太臃肿和错误。