使用Mapbox API的简单地图不起作用?

时间:2015-01-28 09:12:07

标签: leaflet mapbox

我正在使用Mapbox API创建简单的地图并学习。我写了一个非常简单的代码来显示某些坐标上的中心,但地图不会显示。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
var map = L.mapbox.map('map', {
    center: [28.611690, 77.191008],
    zoom: 13
});
</script>

</body>
</html>

我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

你使用L.mapbox.map的错误参数,第一个元素是正确的,那是HTML元素的ID或HTML元素的引用。然而,第二个不是选项对象。第二个是你的mapbox mapid(或url,或tilejson),你可以通过Mapbox编辑器创建自己的地图:https://www.mapbox.com/editor/#app第三个参数是选项对象。

L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio', {
    center: [28.611690, 77.191008],
    zoom: 13
});