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

Question

我用的是Ionic和吴-地图。我必须显示不同的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规范吗？这是或Ionic目录上的一个bug吗？

我没有看到任何错误或任何表明有任何错误的地方，只是本地KML文件似乎无法被读取，与远程的KML文件不同，规范不会在地图上显示。

Answer 1

它不是一个bug，既不是ng-map库，也不是Ionic。ng-map库使用KML Layers，而KML Layers又不支持从本地主机或文件系统加载KML文件。

基本上，这里有两种选择：

1)将KML文件放在google服务器可以访问的公共服务器上，因为KML解析和呈现是由Google服务器完成的。

2)利用第三方库(如geoxml3库 )，它允许加载KML文件并解析驻留在本地主机上的KML文件，如下所示：

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');
        });
    });

演示