javascript - 如何获取 Cordova 的谷歌地图API key

标签 javascript android ios cordova google-maps

我是 Cordova 的初学者。 我在显示谷歌地图时遇到问题。
我可以使用 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>

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

我第一次使用 javascript 键。但它在ios和android上不起作用。我想在 android 上运行我应该使用 andorid key 。但如果是的话我怎样才能得到sha足迹 key 。 ios 上也是同样的情况。没有这个我无法获得 android google map api key 。我正在尝试找到解决方案,但是有很多视频和文档,如果我使用 javascript api key ,它效果很好。但事实并非如此。我相信。如果是的话我们怎样才能拿到 key ?其次,是否正确地将 android 和 ios key 插入到 javascript 代码中?

请帮助我。谢谢。

最佳答案

My question is that what kind of key I should use?

无论应用所在的设备如何,您都应该使用正确的 API key 。

如果您前往Google Developer Console ,如果您还没有一次性 > 凭据 > 创建凭据并选择 API key ,请创建一个帐户。 创建您需要的任何一个,Android、iOS 等。

Loading the script

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

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

(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恕我直言,它对我来说太臃肿和有缺陷,无法在商业应用程序中使用。

关于javascript - 如何获取 Cordova 的谷歌地图API key ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40668376/

相关文章:

javascript - 如何从另一个组件获取按钮 ID?

javascript - 如何通过网络浏览器更改系统上的注册表设置

android - 如何在 Android 中实际使用 Material Design 工具生成的调色板?

android - 如何在 EditText 上应用 Textchange 事件

ios - CloudKit 通知

ios - 'present modally' View Controller 中的 ScrollView 不工作

javascript - 悬停时缩放背景图像

javascript - 检查页面是否在 JavaScript 中重新加载或刷新

android - 如何找出Android应用程序需要的权限

ios - 为什么我不能将 UIBarButtonItem 拖到导航栏上?