Apps 스크립트를 통해 드라이브의 Json에 액세스 Google지도를 만들기위한 HTML 서비스

Google App 스크립트의 html 서비스와 Maps API V3을 사용하여지도를 만들려고합니다.Apps 스크립트를 통해 드라이브의 Json에 액세스 Google지도를 만들기위한 HTML 서비스

Google 기본지도를 사용할 수는 있지만 Google 드라이브의 geojson을지도의 데이터 레이어로로드하고 문제가 발생했습니다. 나는 언 바운드 스크립트 편집기에서 일하고있다.

여기에이 스크립트의 결과

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Data Layer: Simple</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key/*my key*/&callback=initMap"> 
    </script> 

    <script> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 11, 
      center: {lat: 29.454235, lng: -98.506203} 
     }); 
     var x = google.script.run.getData() //call app script function to get geojson file here 
     map.data.loadGeoJson(x); //load geojson as data layer 
     } 
    </script> 
    </body> 
</html>

내가 어떤 다각형이있을 기대 빈 구글지도 내 ui.html 내 Code.gs

function doGet() { 
    return HtmlService.createHtmlOutputFromFile('ui') 
        .setSandboxMode(HtmlService.SandboxMode.IFRAME) 
} 
function getData(){ 
    return DriveApp.getFileById("/*file-id*/") 
}

이며, 여기에 Google의 데이터 레이어 예와 같이지도에로드 됨 https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple

google.script.run 대신 app script scriplets를 사용해야합니까? 그 중 하나를 작동시키는 데 어려움을 겪고있었습니다.

도움이나 통찰력이 있으면 감사하겠습니다. 데이터가지도 렌더링 후로드하고 보여 결코 있도록

출처

2016-08-09 user3597565

코드

var x = google.script.run.getData()

의 라인은 비동기 호출입니다. 귀하의 문제에 대한 해결책은 템플릿을 사용해야합니다 (그러나 가장 좋은 솔루션이라고 생각하지 않습니다. 좋은 해결책은 비동기 호출을 처리하는 것입니다) 그럼에도 불구하고 여기에 변경해야 할 것이 있습니다 :

GS 파일 대신 에 의해 선 var x = google.script.run.getData()을 대체

function doGet() { 
    return HtmlService.createTemplateFromFile(filename)('ui').evaluate() 
        .setSandboxMode(HtmlService.SandboxMode.IFRAME) 
}

당신의 UI 파일 : HTML 파일을 호출하면 HTML 템플릿을 호출

var x = "<?!= DriveApp.getFileById("/*file-id*/").getBlob().getDataAsString() ?>"

DriveApp.getFileById 만 파일을 잡을 것입니다하지만 그것으로 읽을 수 없습니다입니다. 그런 다음 을 사용하여 파일의 내용을 가져오고 싶다고 말할 필요가 있습니다.
마커 <?!= 및 ?>은이 템플릿 파일에서 렌더링하기 전에 코드를 내부에서 평가해야한다는 것을 알 수 있습니다.

출처

2016-08-09 14:16:42 Harold

감사합니다. Harold. 그것은 도움이되는 설명이었고 나는 그것이 올바른 방향으로 나아 갔다고 생각합니다. 지금 스크립트를 실행하면 "userCodeAppPanel : 8 Uncaught SyntaxError : 유효하지 않거나 예기치 않은 토큰"오류와 "코드"가 발생합니다. InvalidValueError : initMap은 "code"함수가 아니지만 변수 x를 console.log에 인쇄 할 수 있습니다 그래서 geojson 문자열이 올바르게 당겨지고 있음을 알 수 있습니다. 좋아 보여요. – user3597565

작동 해. 몇 가지 사항을 조정해야했습니다. 참고로, "return HtmlService.createTemplateFromFile (filename) ('ui')에서"(filename) "을 제거했습니다." ""이 변경 후에 map.data.loadGeoJson' 대신'map.data.addGeoJson'을 사용하여 모든 것이 예상대로 작동했습니다. 고마워 해롤드! – user3597565

Apps 스크립트를 통해 드라이브의 Json에 액세스 Google지도를 만들기위한 HTML 서비스

답변

관련 문제