如何使用mapbox麻点
1.注册账号获得access_token.
https://www.mapbox.com
也可使用mapbox网页上的access_token
2.在网页中嵌入地图
页面结构如下：
<!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.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/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>';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
</script>
</body>
</html>
3.实例化maker并添加至地图
如有多个marker请用foreach添加（数据源一般来源于服务器）
<script>
// L.marker is a low-level marker constructor in Leaflet.
L.marker([37.9, -77], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bus',
'marker-color': '#fa0'
})
}).addTo(map);
</script>
4、点击marker出现弹层
需要用到marker的bindPopup()方法
例子中的popupContent为html
<script>
marker.bindPopup(popupContent).openPopup();
</script>
最后修订：星期四, 02. 三月 2017 05:14下午
