Question

我正在尝试使用Google App脚本的html服务和Maps API V3来创建地图。

我可以让google基本地图正常运行，但我想在Google云端硬盘中加载geojson作为地图上的数据图层并遇到问题。我正在使用未绑定的脚本编辑器。

这是我的Code.gs

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

这是我的ui.html

<!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>

此脚本的结果是一张空白的谷歌地图，我希望在地图上加载一些多边形，例如谷歌的数据层示例https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple

我应该使用应用脚本scriplets而不是google.script.run吗？我也无法让它工作。

非常感谢任何帮助或见解！

Answer 1

代码行

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

是一个异步调用，因此数据在渲染地图后加载，并且从未显示过。你的问题的解决方案应该是使用模板（但我不认为这是最好的解决方案。一个很好的解决方案是处理异步调用）然而，这是你需要改变的地方：

在您的GS文件中，而不是调用html文件，调用html模板：

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

在您的UI文件中

将行var x = google.script.run.getData()替换为：

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

DriveApp.getFileById只会捕获该文件，但它不可读。然后，您需要说明要使用getBlob().getDataAsString()获取文件的内容标记<?!=和?>在这里说我们需要在渲染之前评估内部代码。

通过Apps Script HTML Service访问Drive中的Json以创建Google Map

1 个答案: