ng-map 只打开远程 KML 文件而不打开本地文件？

Question

我正在使用 Ionic 和 ng-map。我必须显示不同的 KML（一次一个，并应用户请求）。 KML 加载到地图上，但仅适用于远程 KML。所以这个有效：

<div style="height: 100%">
  <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
    <kml-layer url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
  </ng-map>
</div>

我的本​​地 KML 位于 Ionic 应用程序中 www 目录内的 kml 文件夹中。

我正在加载一个像这样的本地 KML 文件（与远程 KML 文件的语法相同）：

<div style="height: 100%">
  <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
    <kml-layer url="./kml/cta.kml"></kml-layer>
  </ng-map>
</div>

但 KML 行不像远程 KML 文件那样显示。地图已加载，但没有 KML 中指定的线。

那么，ng-map 是否需要远程 KML 才能加载 KML 规范？这是 ng-map 或 Ionic 目录的错误吗？

除了似乎无法读取本地 KML 文件以及与远程 KML 文件不同，规格不会显示在地图上之外，我没有收到任何错误或任何表明有任何问题的信息。

Answer 1

这既不是 ng-map 库也不是 Ionic 的错误。 ng-map 库利用 KML Layers 反过来不支持从本地主机或文件系统加载 KML 文件。

基本上你有两个选择：

1) 将 KML 文件放在谷歌服务器可以访问的公共服务器上，因为 KML 的解析和渲染是由谷歌服务器完成的

2) 利用第三方库，例如geoxml3 library，它允许您加载 KML 文件并解析它托管在 localhost 上，如下所示：

HTML

<div ng-app="mapApp" ng-controller="mapController">
    <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;"/>
</div>

Js

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
            var myParser = new geoXML3.parser({ map: map });
            myParser.parse('cta.kml');
        });
    });

Demo