Javascript 有角的小叶指令产生许多file://c.tile.openstreetmap.org/17/38591/49266.png net:：ERR_FILE_NOT_FOUND错误

我在尝试传单角度指令。我遵循了一些看似简单的步骤，但没有显示地图，我的控制台中出现了一系列类似以下的错误：

得到file://c.tile.openstreetmap.org/17/38591/49266.png net:：找不到错误文件

这是我的控制器：

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>

---

如果您尚未解决问题，这是因为您是从文件系统而不是通过（可能是本地的）主机/服务器打开网页的，并且是因为默认的平铺层URL模板

因此，您的浏览器重新使用与打开页面相同的协议，即

文件：//

。但当然，您的文件系统上没有OSM磁贴，因此浏览器无法检索任何磁贴

您可以通过服务器打开页面，或指定平铺层的URL模板（包括

http://

或

https://

协议），轻松解决此问题。为此，您必须使用

tiles

属性扩展

$scope

，该属性是至少具有

url

属性的对象

可能是这样的：

angular.extend（$scope{
瓷砖：{
url:“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”，
选项：{
属性：“©；贡献者”
}
}
});

---

参见示例：

太棒了，谢谢！与服务器完美配合。很高兴它解决了您的问题。谢谢你的反馈！请注意，感谢他人的方式也是接受帮助你的答案。一旦你有足够的“声誉”，你也将有能力“提高投票权”。一切就绪（我相信）。我想，由于我的声誉有限，我也无法接受答案。