2016-11-18 99 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

感謝您的回覆。我已經使用這個插件,但它不適合我。你能解釋爲什麼我看不到結果嗎? –