0
回答
零云lingyun.net技术分享之:如何开发mapbox地图麻点
科大讯飞通用文字识别100000次/天免费使用。立即申请   

地图开发是日常开发中常见的一个需求,涉及国外项目时,mapbox是一个不错的选择,毕竟Google map大家都懂。

下面聊一下如何使用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下午

举报
CoreThink
发帖于1年前 0回/145阅
顶部