5

我正在尝试创建一个 jquery mobile phonegap 应用程序，并且我想使用其中嵌入的传单地图。我目前正在做一个非常基本的概念验证，但我运气不佳。每次我尝试加载地图时，地图的 .png 都不会加载，控制台会告诉我它的禁止。我想我可能设置了错误的地图 URL，但是 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，但除此之外，我不知道还能去哪里。

在此先感谢您的帮助。

4

2 回答 2

5

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

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

这将为您提供一个令牌，您必须将其附加到磁贴 url 以在 cloudmade 服务器上进行身份验证：

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
于 2013-11-30T04:51:31.840 回答
1

看起来地理定位方法不起作用，因此它尝试加载图像 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 设置上面的选项变量，而不是使用内置的传单在方法。

希望有帮助。

于 2012-07-18T15:33:12.890 回答