传单地图网址被禁止

Question

我正在尝试创建一个jquery手机移动应用程序,我想使用嵌入其中的传单地图.我现在正在做一个非常基本的概念验证,但我没有太多运气.每次我尝试加载地图时,地图的.png都不会加载,控制台会告诉我它是Forbidden.我想我可能错误地设置了地图网址,但是文档在CloudMade网站上有点模糊.我们将非常感谢您提供的任何帮助.

码:

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/MY_APP_KEY/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
map.addLayer(cloudmade);

map.locateAndSetView(16);

map.on('locationfound', onLocationFound);

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    var marker = new L.Marker(e.latlng);
    map.addLayer(marker);
    marker.bindPopup("You are within " + radius + " meters from this point").openPopup();

    var circle = new L.Circle(e.latlng, radius);
    map.addLayer(circle);
}

map.on('locationerror', onLocationError);

function onLocationError(e) {
    alert(e.message);
}

当我尝试加载图像时,出现以下错误:获取http://a.tile.cloudmade.com/MY_APP_KEY/997/256/0/0/0/0pn 403(禁止).显然我正在用我从CloudMade获得的密钥替换MY_APP_KEY,但除此之外,我不知道还有什么地方可以转.

在此先感谢您的帮助.

Answer 1

提供Cloudmade API密钥是强制性的,但还不够.您还必须提供必须为每个用户和设备请求的令牌.如Cloudmade Authorization API doc中所述,可以通过简单的POST检索令牌:

POST http://auth.cloudmade.com/token/APIKEY?userid=UserID&deviceid=DeviceID

这将为您提供一个令牌,您必须附加到磁贴网址以在云端服务器上进行身份验证:

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/MY_APP_KEY/997/256/{z}/{x}/{y}.png?token=TOKEN'

但是,为了快速证明概念,您可以直接使用自己的API密钥,不需要身份验证令牌:

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/997/256/{z}/{x}/{y].png

Answer 2

看起来地理定位方法不起作用，因此它尝试加载图像 0, 0, 0，因为您尚未定义任何坐标。

您可以尝试在顶行设置一些默认选项（即），如下所示：

var options ={
  center: new L.LatLng(37.7, -122.2),
  zoom: 10
};

var map = new L.Map('map', options);

这至少应该将地图默认为旧金山，以便您可以确定图块是否正确加载。

JSFiddle： http: //jsfiddle.net/peBZp/

传单可能存在地理位置和电话间隙问题。您可以尝试按照以下文档进行操作：http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html，只需使用该函数返回的纬度/经度设置上面的选项变量，而不是使用传单的构建在方法中。

希望有帮助。