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

问题

I'm using Ionic and ng-map. I have to display different KMLs (one at a time and on user request). The KML loads on the map but only for remote KMLs. So this one works:

<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>

My local KMLs are in a kml folder inside www directory in my Ionic app.

And I'm loading a local KML file like this (same syntax as the remote KML file):

<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>

But the KML lines don't show up like the remote KML file. The map is loaded but just without the lines specified in the KML.

So, does ng-map require a remote KML to load the KML specs? Is this a bug on ng-map or Ionic directories?

I don't get any errors or anything indicating that there's anything wrong except that the local KML file can't seem to be read that the specs won't show up on the map unlike the remote KML file.

回答1:

It is not a bug neither of ng-map library nor a Ionic. ng-map library utilizes KML Layers which in turn does not support the loading of KML file from localhost or a file system.

Basically you have two options here:

1) place the KML file on a public server where google server can access it, since parsing of KML and rendering is done by Google servers

2) utilize third party library such as geoxml3 library which allows you to load KML file and parse it hosted on localhost as shown below:

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>

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

来源：https://stackoverflow.com/questions/38572538/ng-map-only-opens-remote-kml-file-but-not-local-file

标签

javascript

angularjs

google-maps

ionic-framework

ng-map