2

Web サービスでマップを使用leafletしていますが、正しく読み込まれません。下部は実際にはロードされていません。

それを解決する方法は？私はこのコードを使用します：

var latlng = new L.LatLng(50.5, 30.51);

var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});

var markers = new L.FeatureGroup();

var london = new L.LatLng(51.505, -0.09); // geographical point (Longitude and Latitude)  
map.setView(london, 13).addLayer(cloudmade);
4

3 に答える 3

4

エラー：cloudmadeが定義されていません

マップはどこから入手しますか？次の例のようにURLを定義する必要があります：Leafletクイックスタートガイド。

変数を使用する前にcloudmade（独自のキーを取得した後）、この行を挿入します。

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png');
于 2012-03-08T00:30:00.190 に答える
3

これは、次の問題のいずれかである可能性があります。

  • DOM の準備が整う前にマップを初期化します。
  • TileLayer の cloudmade 変数が正しく設定されていません。

次の解決策は、ID 'map' を持つ要素が使用可能な場合にマップを初期化します (これは、ページの下部にスクリプトを配置することによって実現されます。代わりに、jQuery を使用することもできます)。これにより、cloudmade 変数が MapQuest OpenStreetMap タイルを使用するようにも設定されます。

<!doctype html>
<html>
    <head>
        <title>Leaflet test</title>
        <script type="text/javascript" src="leaflet.js"></script>
        <link href="leaflet.css" rel="stylesheet" type="text/css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="leaflet.ie.css" />
        <![endif]-->
    </head>
    <body>
        <div id="map" style="width:640px;height:480px"></div>
        <script type="text/javascript">
            var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
            var subDomains = ['otile1','otile2','otile3','otile4'];
            var cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
            var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});

            var london = new L.LatLng(51.505, -0.09);

            var map = new L.Map('map', {center: london, zoom: 13, layers : [cloudmade]});
        </script>
    </body>
</html>

また、リーフレット - クイック スタート ガイドの最初の例を参照することをお勧めします。各行が何を行っているかを説明し、CloudMade タイル レイヤーを使用するためのソリューションを提供します。

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

于 2012-02-29T10:31:06.317 に答える
0

leaflet.js の詳細を気にしたくない場合は、この https://github.com/hamsterbacke23/qleafletを参照してください。

于 2013-09-12T09:08:33.887 に答える