无法将 KML 文件渲染到谷歌地图中答案

【问题标题】：Unable to render KML file into google map无法将 KML 文件渲染到谷歌地图中
【发布时间】：2018-09-09 14:14:22
【问题描述】：

我的谷歌地图代码

var myOptions = {
    center: {lat: 55.864237, lng: -4.251806},
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map1 = new google.maps.Map(document.getElementById("map"), myOptions);

var geoXml = new geoXML3.parser({
    map: map1
});
var source = 'https://developers.google.com/kml/documentation/KML_Samples.kml';

geoXml.parse(source);

我得到的错误如下：

无法加载https://developers.google.com/kml/documentation/KML_Samples.kml：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:8080' 因此不允许访问。

XML 解析错误无法检索https://developers.google.com/kml/documentation/KML_Samples.kml

有人知道我该如何解决这个问题吗？

【问题讨论】：

尝试下载 kml 文件并将其本地加载到您的页面中。您收到的错误是由于安全限制，谷歌阻止您加载驻留在其服务器上的资源。 CORS

标签： javascript google-maps kml geoxml3

【解决方案1】：

GeoXml3 使用浏览器的 XmlHttpRequest 对象，该对象受制于same origin policy。您无法从http://localhost:8080（不同来源）访问https://developers.google.com。

要使用 GeoXml3，请将该文件复制到您的服务器并通过相对 URL 访问它，或者通过 http://localhost:8080 上的代理访问它。

example loading that URL through a proxy

example using the proxy property of GeoXml3

另一种选择是使用 Google Maps Javascript API v3 KmlLayer，它从 Google 的服务器访问 KML，不受相同来源政策的约束。

【讨论】：

实际上我一开始尝试了 KML 层，但在以下问题中遇到了问题。 1. 我在 Dropbox 上上传了我的 kml 文件。我成功地在谷歌地图中渲染了那个 kml 文件。但是颜色模式和具有不同颜色的多边形未显示在地图中。它只是显示折线。当我将这个文件上传到在线 KML 查看器时，我才知道这个问题。（ivanrublev.me/kml）。我的 kml 的链接 - dropbox.com/s/5fj8cns3nglcrcn/TRACKMAP.kml?dl=1 这就是我尝试另一种方式的原因。
KML 不是“我的”，它来自 Google（在 OP 的问题中）。示例中的多边形用颜色填充。仔细查看样式定义。