mapbox GL js 实践

前期工作

[x] api (https://www.mapbox.com/mapbox-gl-js/api)
[x] 注册拿到token

基础的雏形

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .marker {
            display: block;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id='map'></div>
</body>
</html>
<script>
    // token 就是注册拿到的
    mapboxgl.accessToken = 'pk.eyJ1IjoiZ2VmZm9saXUiLCJhIjoiY2pvZm9xeWN3MDFoejNrcnhrZWJ3cWY3byJ9.QlGQk9NBBKzz7dsWpU6a6A'
    // 创建地图
    let map = new mapboxgl.Map({
        container: 'map', // 容器id
        style: 'mapbox://styles/mapbox/streets-v8',
        center: [121, 31], // 一开始显示的坐标
        zoom: 5 // 层数 数值越大显示越详细
    })
</script>

鼠标移动显示经纬度

在html加上这个

<pre id='info'></pre>

样式

#info {
    display: block;
    position: relative;
    margin: 0px auto;
    width: 50%;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #222;
    background: #fff;
 }

js代码

// 鼠标移动显示经纬度
map.on('mousemove', function (e) {
    // console.log(JSON.stringify(e.point) + JSON.stringify(e.lngLat))
    document.getElementById('info').innerHTML = JSON.stringify(e.point) + '<br />' + JSON.stringify(e.lngLat)
})

显示地方坐标，并且点击显示详情

// 要渲染的数据
let tempData = [
    {
        coordinate: [121.49674908642964, 31.19320855879657], // 坐标
        // 点击坐标出现的文本
        title: '上海', 
        text: '上海简介#######'
    },
    {
        coordinate: [113.75726241528064, 23.001646891394145],
        title: '东莞',
        text: '东莞简介#######'
    },
]

tempData.forEach(item => {
    new mapboxgl.Marker()
        .setLngLat(item.coordinate)
        .addTo(map)

    new mapboxgl.Marker()
        .setLngLat(item.coordinate)
        .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
        .setHTML(`<h3>${item.title}</h3><p>${item.text}</p>`))
        .addTo(map)
})

🚶 待续

mynameisjohnahahah / Notes

mapbox GL js 实践 #2

mapbox GL js 实践

前期工作

基础的雏形

鼠标移动显示经纬度

显示地方坐标，并且点击显示详情