JavaScript传单地图示例将不会显示

Question

I am trying to show leaflet on my website and it just will not show, I am following the simple tutorial from http://leafletjs.com/examples/quick-start.html and the tiles do not load just get a gray map, this is what I have on my page 我试图在我的网站上显示传单，它只是不会显示，我正在关注http://leafletjs.com/examples/quick-start.html的简单教程，并且瓷砖不加载只是获取灰色地图，这就是我在页面上的内容

<head>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
   <style type="text/css">
    #map {
        height: 180px;
        width: 500px;
    }
    </style>    
 </head>
 <body>
<div id="map">

</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
    maxZoom: 18
}).addTo(map);
 </script>
 </body>

Thats it the map does not show only a gray area has anybody gotten this to work? 多数民众赞成在地图上只显示一个灰色区域有没有人让这个工作？ I am using internet explorer 10 but the map does not show o firefox or chrome either. 我正在使用Internet Explorer 10，但地图也没有显示o firefox或chrome。

Answer 1

Sure. 当然。 You have to take an API key from a tile service. 您必须从磁贴服务中获取API密钥。

var map = L.map('map').setView([36.7667, 13.5833], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/74b831354f3554faa108ac65e3/997/256/{z}/{x}/{y}.png', {
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
          maxZoom: 18
      }).addTo(map);

      var marker = L.marker([36.752866, 13.556323]).addTo(map);

Please notice 74b831354f3554faa108ac65e3 . 请注意74b831354f3554faa108ac65e3 。 It's not going to work for you. 这不适合你。 You can use this service to get a API KEY 您可以使用此服务获取API密钥

EDIT 27 APR 2014: CloudMade is not free anymore. 编辑2014年4月27日：CloudMade不再免费。 You can use: MapQuest, MapSurfer.NET or openstreetmap.de 您可以使用：MapQuest，MapSurfer.NET或openstreetmap.de

JavaScript传单地图示例将不会显示

问题描述

1 个解决方案

解决方案1
7 已采纳 2014-03-02 21:15:11

JavaScript传单地图示例将不会显示

问题描述

1 个解决方案

解决方案1 7 已采纳 2014-03-02 21:15:11

解决方案1
7 已采纳 2014-03-02 21:15:11