2016-11-18 6 views
1

나는 cordova의 초보자입니다. Google지도를 표시하는 데 문제가 있습니다.
자바 스크립트를 사용하여 웹 사이트에 Google지도를 표시 할 수 있습니다. 또한 자바와 xcode를 사용하여 Google지도를 표시 할 수 있습니다.코드바의 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> 

물론 웹 브라우저에서 잘 작동합니다. 제 질문은 어떤 종류의 열쇠를 사용해야한다는 것입니까?

처음에는 자바 스크립트 키를 사용합니다. 그러나 그것은 ios와 android에서 작동하지 않았습니다. 나는 andorid 열쇠를 사용해야 안드로이드에서 실행하는 것 같아요. 하지만 그렇다면 어떻게하면 내가 발자국 키를 얻을 수 있습니다. 이오스도 마찬가지다. 이것이 없으면 안드로이드 Google 맵 API 키를 얻을 수 없습니다. 솔루션을 찾을려고 노력하고 있지만 동영상과 문서가 많이 있습니다. 자바 스크립트 API 키를 사용하면 제대로 작동합니다. 그러나 그것은 사실이 아닙니다. 나는 확신한다. 그렇다면 어떻게 열쇠를 얻을 수 있습니까? 두 번째는 안드로이드와 ios 키를 자바 스크립트 코드에 삽입하는 것인가?

도와주세요. 감사.

+0

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

답변

0

제 질문은 어떤 종류의 키를 사용해야합니까?

앱이 설치된 기기에 올바른 API 키를 사용해야합니다.

Google Developer Console으로 이동 한 경우> 자격증 명> 자격증 명을 만들고 API 키를 선택하지 않은 경우 계정을 만드십시오. 스크립트

당신은 정말 응용 프로그램 heres a tutorial for that에서 외부 스크립트를로드하는 사용자의 인터넷 연결을 확인해야한다로드, 당신이 필요로하는 어느 사람 등 안드로이드, 아이폰 OS

을 만듭니다.

기본적으로 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

답변 해 주셔서 감사합니다. 이미이 플러그인을 사용했지만 나에게는 적합하지 않습니다. 왜 결과를 볼 수 없는지 설명해 주시겠습니까? –