Leaflet 如何为带有传单的Mapbox指定accessToken_Leaflet_Access Token_Mapbox

Leaflet 如何为带有传单的Mapbox指定accessToken

leaflet mapbox

Leaflet 如何为带有传单的Mapbox指定accessToken,leaflet,access-token,mapbox,Leaflet,Access Token,Mapbox,从Mapbox站点，我测试了此代码并成功： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http:

从Mapbox站点，我测试了此代码并成功：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.cs
<style>
  body { margin:0; padding:0; }
  .map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map' class='map'> </div>
<script>
var map = new L.Map('map', {
  center: new L.LatLng(51.505, -0.09),
  zoom: 8,
  layers: new L.TileLayer('https://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}
});
</script>
</body>
</html>


只需在L.tillelayer
中使用正确的url即可。您需要添加mapId和令牌，并使用正确的属性。如果您从多个子域加载互动程序也会更好，因为您的浏览器一次最多可以处理四个连接。代码示例：
L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
    attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox &copy; OpenStreetMap</a>',
    subdomains: ['a','b','c','d'],
    mapId: 'myMapId',
    token: 'myUserToken'
});

以下是Plunker上的一个工作示例：
谢谢，我尝试并确实获得了项目中的地图样式，但标记和其他功能（例如多边形）仍然缺失：-（好的，明白了，我仔细阅读了功能部分，我会更新我的答案。我需要一些时间来测试，有一点进展，但我没有遇到CORS问题-浏览器只是不让我通过“getJSON”行…PS。别忘了隐藏你的访问令牌，例如，使用process.env。你的访问令牌
在.env
文件中定义）当然，不应该将.env文件推送到Git repo！
$.getJSON('http://a.tiles.mapbox.com/v4/MAPID/features.json?access_token=TOKEN', function (data) {
      // Assuming the variable map contains your mapinstance
      var geojson = L.geoJson(data).addTo(map);
      map.fitBounds(geojson.getBounds());
});