我被一个非常奇怪的问题锁定了。我正在使用带有angular-leaflet-directive 的传单。在以前的应用程序上,一切正常。
现在在一个新的应用程序上,我想实现一个新的传单地图。因此,我复制了我以前的代码。
我的问题是,传单地图打开,我的标记被创建,但是
瓷砖未加载
(我的应用确实拥有互联网和互联网权利)每个尝试加载的磁贴都失败并出现以下问题:
GET http://a.tile.openstreetmap.org/18/98891/132985.png 404 (Not Found)
如您所见,如果直接访问磁贴,您可以在浏览器上看到它。
每个 Tile GET 请求的标头
GENERAL
Request URL:http://a.tile.openstreetmap.org/18/98892/132984.png
Request Method:GET
**Status Code:404 Not Found (from cache)**
RESPONSE HEADERS
Client-Via:shouldInterceptRequest
REQUEST HEADERS
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
我的感觉是它试图从缓存中加载它而不是直接从开放提供程序加载它我仍然无法得到我的两个项目之间的不同之处
我的其他工作应用程序的每个磁贴都有以下标题:
GENERAL
Remote Address:192.163.219.40:80
Request URL:http://c.tile.openstreetmap.org/18/98818/132892.png
Request Method:GET
Status Code:200 OK
Response Headers
view source
Access-Control-Allow-Origin:*
Cache-Control:max-age=604800
Content-Length:3584
Content-Type:image/png
Date:Fri, 08 May 2015 13:57:36 GMT
ETag:"51fb8a7a0f719b211641dca08bf1d76b"
Expires:Fri, 15 May 2015 13:57:36 GMT
Server:Apache/2.4.7 (Ubuntu)
Via:1.1 nadder-02.openstreetmap.org:3128 (squid/2.7.STABLE9)
X-Cache:MISS from nadder-02.openstreetmap.org
X-Cache-Lookup:MISS from nadder-02.openstreetmap.org:3128
Request Headers
view source
Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,en-US;q=0.8
Connection:keep-alive
Host:c.tile.openstreetmap.org
User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:01BAB1E4-1122-4CEF-AC90-BDE2C1113EF4
X-Requested-With:com.myapp.myapp
AngularJS 配置
缓存被禁用。
$httpProvider.defaults.cache = false;
我还尝试了以下添加剂,因为 HTTP TILE LOADING 得到了(不成功)
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get.Pragma = 'no-cache';
传单指令的 HTML 创建
<div data-tap-disabled="true" style="height: 90%; {{iosPlatform ? 'top:10%; position:relative' : ''}}">
<leaflet id="map" defaults="defaults" center="center"
bounds="bounds" event-broadcast="events" markers="markers"
height="100%" width="100%" class="animation" layers="layers"></leaflet>
</div>
AngularJS 代码
angular.extend($scope, {
center: {
lat: -2.6273,
lng: -44.1932,
zoom: 18
},
markers: {},
defaults: {
scrollWheelZoom: true
},
bounds: {
southWest: {
lat: -2.628074696286876,
lng: -44.19960723876953125,
},
northEast: {
lat: -2.629410211532874,
lng: -44.19617401123046874,
}
},
events: {
map: {
enable: ['popupopen'],
logic: 'emit'
}
},
tiles: {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {
attribution: ''
}
},
layers: {
"baselayers": {
"osm": {
"name": "Cidade",
"url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"type": "xyz",
"layerParams": {},
"layerOptions": {}
}
},
overlays: {
}
},
controls: {}
});
当我打开我的地图时,我确实调用了以下函数:
$scope.getMyMap = function() {
var d = $q.defer();
leafletData.getMap('map').then(function(map) {
$scope.map = map;
map.invalidateSize();
d.resolve(map);
}, function(err) {
d.reject(err);
});
return d.promise;
};