Question

我刚开始使用Angular Leaflet指令（http://tombatossals.github.io/angular-leaflet-directive/#!/），我试图将其整合到离子项目中。

在浏览器上，一切正常：加载地图图块。当我使用XCode编译应用程序并在iOS模拟器中运行时，图块不会按预期加载。

当我使用检查器时，我注意到加载的切片的html具有以下形式：

<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/18/131008/87171.png" style="height: 256px; width: 256px; left: 791px; top: -114px;">

请注意src属性缺少协议。在Cordova包装器中，应用程序假定这应该是file：//，并且自然无法加载到tile中。

有没有办法：

明确地将http：//协议添加到img src？
将Cordova设置为默认为http：//，其中URI以//？

GitHub问题：https://github.com/tombatossals/angular-leaflet-directive/issues/460

Answer 1

我不知道问题的确切原因，但它似乎是最新版本的传单指令的一个问题。

作为解决问题的当前解决方法，请使用angular-leaflet v0.7.7而不是最新版本。

如果您使用凉亭，请将bower.json行更改为

"angular-leaflet": "0.7.7"

确保它不是＆＃39; ~0.7.7＆＃39;

希望这有帮助！

Answer 2

此问题似乎已在当前版本的Angular Leaflet Directive中得到修复。

我目前在我的控制器中使用此代码，它可以在浏览器和设备上使用：

  angular.extend($scope, {
    center: {
      lat: 52.367215,
      lng: 4.893036,
      zoom: 1
    },
    maxbounds: {},
    defaults: {
      maxZoom: 16,
      minZoom: 12,
      tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
      tileLayerOptions: {
          opacity: 0.9,
          detectRetina: true,
          reuseTiles: true,
      },
      scrollWheelZoom: true
    }
  })

由于协议不匹配，Cordova包装中的Angular Leaflet不会加载tile

2 个答案: