加载 javascript API 到 google 地图时不显示 KML

Question

我想使用 GoogleMaps 提供的 API 加载 KML 文件，但无法正常工作。

我有一个 KML 文件，当从我的计算机手动加载到 GoogleMaps 时，它可以正常工作并显示所有点。但是，当我尝试使用 API 执行此操作时，它不起作用。我将我的文件上传到 Google 驱动器，我正在使用 Google 提供的示例（我只更改坐标、文件和 API 键）。我做错了什么？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 40.45, lng: -3.8}
        });
        var georssLayer = new google.maps.KmlLayer({
          url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
        });
        georssLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>
  </body>
</html>

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 40.45,
      lng: -3.8
    }
  });
  var georssLayer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
  });
  georssLayer.setMap(map);
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 1

您使用的 link 到 Google 驱动器不提供原始 KML。
如果我在加载后检查 KmlLayer 的状态，我会得到 INVALID_DOCUMENT（fiddle，检查 javascript 控制台）

根据 the article: Direct linking to your files on Dropbox, Google Drive and OneDrive:

Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:

https://drive.google.com/file/d/FILE_ID/edit?usp=sharing

Becomes:

https://drive.google.com/uc?export=download&id=FILE_ID

你的情况：

url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',

变为：

url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',

proof of concept fiddle

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 40.45,
      lng: -3.8
    }
  });
  var georssLayer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
  });
  google.maps.event.addListener(georssLayer, 'status_changed', function() {
    console.log(georssLayer.getStatus());
  })
  georssLayer.setMap(map);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

加载 javascript API 到 google 地图时不显示 KML

KML not shown when loaded with javascript API to google maps

google-maps

google-maps-api-3

kml