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

Question

我正在使用 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>

我做错了什么？

Answer 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
});

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

A simple map using Mapbox API not working?

leaflet

mapbox