Angular Leaflet 指令产生许多 GET file://c.tile.openstreetmap.org/17/38591/49266.png net::ERR_FILE_NOT_FOUND 错误

Question

我正在尝试使用 Leaflet Angular 指令进行试验。我遵循了一些看似简单的步骤，但没有显示地图，而且我的控制台中出现了一堆错误，类似于：

获取文件://c.tile.openstreetmap.org/17/38591/49266.png net::ERR_FILE_NOT_FOUND

这是我的控制器：

app.controller('MainController', [ '$scope', function($scope) {
    $scope.mapCenter = { lat: 40.741934, lng: -74.004897, zoom: 17 }
}]);

这是标记：

<div class="main" ng-controller="MainController">
    <div class="container-fluid" id="map-canvas">
        <leaflet center="mapCenter"></leaflet>
    </div>
</div>

Answer 1

如果您还没有解决您的问题，那是因为您从文件系统打开网页，而不是通过（可能是本地的）主机/服务器，并且因为 Angular Leaflet Directive default Tile Layer URL template does not specify the protocol.

因此，您的浏览器重新使用用于打开页面的相同协议，即 file://。但是当然，您的文件系统上没有 OSM 磁贴，因此浏览器无法检索任何磁贴。

您可以通过服务器打开您的页面，或指定您的 Tile Layer 的 URL 模板，包括 http:// 或 https:// 协议，轻松解决此问题。为此，您必须使用 tiles 属性扩展 $scope，这是一个至少具有 url 属性.[=19 的对象=]

可能是这样的：

angular.extend($scope, {
    tiles: {
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        options: {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    }
});

参见示例：http://tombatossals.github.io/angular-leaflet-directive/#!/examples/tiles

Angular Leaflet 指令产生许多 GET file://c.tile.openstreetmap.org/17/38591/49266.png net::ERR_FILE_NOT_FOUND 错误

Angular Leaflet Directive yielding many GET file://c.tile.openstreetmap.org/17/38591/49266.png net::ERR_FILE_NOT_FOUND errors

javascript

directive

angularjs

leaflet