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);
}

当我尝试加载图像时，出现以下错误：GET http://a.tile.cloudmade.com/MY_APP_KEY/997/256/0/0/0.png 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'

然而，为了快速证明概念，您可以直接使用不需要身份验证令牌的their own API key：

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并使用该函数返回的lat / long设置上面的options变量，而不是使用leaflet的内置方法。

希望有所帮助。

传单地图网址被禁止

2 个答案: