1

我正在使用 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-mapIonic 目录上的错误吗？

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

4

1 回答 1

1

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

基本上你有两个选择：

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

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

演示

于 2016-07-25T17:26:41.303 回答