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处于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，而这又不支持从本地主机或文件系统加载KML文件。

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

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

2 ）利用第三方库，如geoxml3 library它允许您加载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'); 
     }); 
    }); 

Demo