Google Maps API 未加载 KML 文件答案

【问题标题】：Google Maps API not loading KML filesGoogle Maps API 未加载 KML 文件
【发布时间】：2018-09-02 20:59:45
【问题描述】：

背景资料

我正在尝试使用 JS API 构建谷歌地图。我的地图可以在http://matthewjohnwilson.com/Maps/Maps.html找到

我想为我的地图添加路径，因此我使用了位于https://developers.google.com/maps/documentation/javascript/examples/layer-kml 的 KML 示例

我使用 MyMaps 制作了一张地图，可以在这里看到。 https://www.google.com/maps/d/viewer?mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY&hl=en&usp=sharing 这样我就可以尝试从 MyMaps 下载 kml 文件，然后将其上传到我的站点以在我的 js api 地图中使用。

现在讨论这个问题。

我的 KML 文件中的路径不想加载到我的地图中。当我直接访问 KML 文件时，我遇到了 404 错误，所以我调查了一下，结果发现默认情况下不支持托管在 godaddy 上的 KML 文件。所以我编辑了我网站的 Web.config 并添加了

<staticContent> 
 <mimeMap fileExtension=".kmz" mimeType="application/vnd.google-earth.kmz" /> 
 <mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml" /> 
</staticContent>

现在，当我直接转到 KML 文件时，它会尝试下载该文件。我认为这是一件好事，至少我希望我的方向是正确的。但是路径仍然没有加载到我的 JS Api 地图中。

还有什么我可以尝试的吗？我现在被困住了。第一次使用 KML 文件。

【问题讨论】：

标签： javascript api maps kml

【解决方案1】：

尤里卡！我让它工作。所以在 Godaddy 中，我必须进入我的 MORE/IIS 管理并创建一个 KML 文件夹。在运行 IIS 7 时。然后在我的文件管理器中，我现在在我的网站的 webroot 中有一个 KML 文件夹。我将 KML 文件放在那里，并在 http://matthewjohnwilson.com/Maps/Maps.html 中更新了新的 KML 位置，它工作正常。所以现在我只需要将我所有的 KML 文件存放在我网站根目录的 KML 文件夹中。

【讨论】：

【解决方案2】：

使用 MyMaps 输出的最简单方法是直接链接到它：

var kmlLayer = new google.maps.KmlLayer({
  url: "http://www.google.com/maps/d/kml?forcekml=1&mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY",
  map: map
});

然后，当您更改 MyMap 时地图会更新，您无需配置服务器来提供 KML。

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  var mapOptions = {
    center: {
      lat: 45,
      lng: -100
    },
    zoom: 2,
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var kmlLayer = new google.maps.KmlLayer({
    url: "https://www.google.com/maps/d/kml?forcekml=1&mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY",
    map: map
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id='map_canvas'></div>

【讨论】：