如何使用传单指令嵌入一个简单的 mapbox url？答案

【问题标题】：How can I embed a simple mapbox url using the leaflet directive?如何使用传单指令嵌入一个简单的 mapbox url？
【发布时间】：2016-04-27 10:01:26
【问题描述】：

我是 Mapbox 和 Leaflet 的新手，在查看了 leaflet-directive 和 Mapbox documentation 之后，我可以获得示例地图，但现在当我将两者整合并使用我必须使用的 URL 时，http://a.tiles.mapbox.com/v3/myMap.map-12341234.html 用于例子。

这应该很简单，但是我遇到了地图是白色的问题。

我的 HTML 看起来像

<leaflet tiles="tiles"defaults="defaults"></leaflet>

和js

angular.extend($scope, {
    // tiles: 'http://a.tiles.mapbox.com/v3/myMap.map-12341234.html',
    tiles: 'myMap.map-12341234',
    defaults: {
      scrollWheelZoom: false
    }
  });
})

如何嵌入像我的http://a.tiles.mapbox.com/v3/myMap.map-12341234.html 这样的网址

【问题讨论】：

不确定我是否理解这个问题。那么对于您创建的地图，您是尝试使用 Javascript 将其嵌入到网页中，还是只是想要一个可以与他人分享的链接？

标签： angularjs leaflet mapbox angular-leaflet-directive

【解决方案1】：

我不确定我是否理解正确，您是否只是想将传单与您的自定义 Mapbox 样式一起使用？如果是这样的话，这里有一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/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 = '<your access token here>';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/myMap.map-12341234/{z}/{x}/{y}.png?access_token=' + L.mapbox.accessToken, {
    attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('map')
    .addLayer(mapboxTiles)
    .setView([42.3610, -71.0587], 15);
</script>


</body>
</html>

希望对你有所帮助！

【讨论】：