Question

我是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

这样的网址

Answer 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>

希望这会帮助你！

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

1 个答案: