时间戳

首页 > 解决方案 > KML 图层未加载

google-maps - KML 图层未加载

问题描述

我正在尝试在 Google 地图上加载一个简单的 KML 图层。我无法使其适用于特定图层，同时其他类似的 KML 图层可以正常加载。这是代码的最小版本：https ://jsfiddle.net/eundas/0fhqmocv/4/为什么这不起作用？是我的代码还是 KML 的结构？我将不胜感激。

var map;
var options = {
  zoom: 5,
  center: new google.maps.LatLng(-33.5, -70),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);

var Coquimbo4204Layer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
});
google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
console.log(Coquimbo4204Layer.getStatus());
})
Coquimbo4204Layer.setMap(map);

标签： google-mapskml

解决方案

使用发布的代码，我得到FETCH_ERROR，根据文档意味着：The document could not be fetched。

如果 url 是http:而不是https:（这似乎是 Google Drive 的问题），它会起作用。

相关问题：

概念证明小提琴

工作地图截图

代码片段：

var map;
var options = {
  zoom: 5,
  center: new google.maps.LatLng(-33.5, -70),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);

var Coquimbo4204Layer = new google.maps.KmlLayer({
    // url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
    url: 'http://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
});
google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
console.log(Coquimbo4204Layer.getStatus());
})
Coquimbo4204Layer.setMap(map);
#mapcanvas {
  height: 500px;
  width: 500px;
  background: blue;
  margin: 0px;
  padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapcanvas">CANVAS</div>

推荐阅读