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 文件放在 public 服务器 上，google 服务器可以访问它，因为 KML 的解析和渲染是由 Google 服务器

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

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

ng-map only opens remote KML file but not local file?

javascript

angularjs

google-maps

ionic-framework

ng-map