5

jquery mobile phonegap アプリを作成しようとしていますが、そこに埋め込まれたリーフレット マップを使用したいと考えています。現在、かなり基本的な概念実証を行っていますが、あまり運がありません。マップを読み込もうとするたびに、マップの .png が読み込まれず、コンソールに Forbidden と表示されます。おそらくマップの URL を間違って設定していると思いますが、CloudMade の Web サイトのドキュメントは少しあいまいです。あなたが提供できるどんな助けも大歓迎です。

コード：

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 (禁止)。明らかに、MY_APP_KEY を CloudMade から取得したキーに置き換えていますが、それ以外にどこを参照すればよいかわかりません。

助けてくれてありがとう。

4

2 に答える 2

5

Cloudmade API キーの提供は必須ですが、十分ではありません。また、ユーザーとデバイスごとに要求する必要があるトークンを提供する必要があります。Cloudmade Authorization API docで説明されているように、トークンは単純な POST で取得できます。

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

これにより、cloudmade サーバーで認証するためにタイルの URL に追加する必要があるトークンが得られます。

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のドキュメントに従ってみてください。リーフレットのビルドを使用する代わりに、その関数によって返される緯度/経度で上記のオプション変数を設定するだけです。メソッドで。

それが役立つことを願っています。

于 2012-07-18T15:33:12.890 に答える