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应用程序的kml目录下的www文件夹中。

我正在加载这样的本地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，后者不支持从localhost或文件系统加载KML文件。

基本上你有两个选择：

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

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