2016-11-18 67 views
1

我是cordova的初学者。 我有一个问题,显示谷歌地图。
我可以使用JavaScript在网站上显示谷歌地图。 另外我可以使用java和xcode显示谷歌地图。如何获得cordova的googlemap api密钥

但不知道如何显示使用科尔多瓦。因为它是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键。但如果是的话我怎么才能得到沙足迹的关键。在iOS上也是如此。没有这个我不能得到Android谷歌地图API密钥。我试图找到解决方案,但很多视频和文档,如果我使用JavaScript API键,它运作良好。但事实并非如此。我确定。如果是,我们如何才能获得钥匙?第二是它的权利插入到JavaScript代码的Android和iOS的关键?

请帮帮我。谢谢。

+0

https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Installation –

回答

0

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

对于应用程序所在的任何设备,您应该使用正确的API密钥。

如果您转到Google Developer Console,请创建一个帐户,如果您还没有>凭证>创建凭证并选择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恕我直言这是过于臃肿和越野车对我来说,在商业应用程序中使用。

+0

感谢您的回复。我已经使用这个插件,但它不适合我。你能解释为什么我看不到结果吗? –