mapbox全球地图添加多个标注点并显示标签

最近在给公司做一个项目，需要世界地图，百度和腾讯没有英语版，只有高德有，但是高德的缩放率不满足需求，在大屏的情况下还可以，屏幕缩小以后，显示不全。

就会有很多想到用谷歌地图，但是作为一个程序员你懂的，谷歌地图在国内打不开啊，你可以开发，但是对于国内客户是无法看的。

于是搜来搜去找到了一个国外的地图接口。mapbox

官网文档地址：https://docs.mapbox.com/

国内CDN加速资源：https://www.bootcdn.cn/mapbox-gl/

先给大家看看效果：

图片[1]-mapbox全球地图添加多个标注点并显示标签 - 易微帮博客-易微帮博客

看到了吧，可以直接全屏看到全球地图，并且标注为止，同时加上的标签。

因为mapbox 的 Marker 功能没有标签选项，说实话这一点不如国内地图做的人性化一些。

于是我就用了 Popup功能，并且禁止隐藏，然后设定偏移量，这样也达到了国内地图上面设置的 Label 功能，并且可以自定义css样式，更加便利了。

废话不说了直接上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!--     
<script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/2.4.0/mapbox-gl.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/2.4.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body {margin: 0;padding: 0;}
        #map {position: absolute;top: 0;bottom: 0;width: 100%;}
       .info{

            word-break:break-all;
            white-space:normal;
            text-align: left;
            font-weight: bold;
        }
       .info .mapboxgl-popup-content{box-shadow: 0 1px 2px rgba(0,0,0,.9);}
    </style>
</head>
<body>
    

<div id='map' ></div>
<script>
    const markers = [{
        color: '#ff0000',
        position: [108.937724,34.354122],
        content:"位置1",
        offset: [-10,-20],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [114.057868,22.535256],
        content:"位置2",
        offset: [10,0],
        direction:"left"
    }, {
        color: '#ffffff',
        position: [121.666072,31.073487],
        content:"位置3",
        offset: [10,-20],
        direction:"left"
    }, {
        color: '#ffffff',
        position: [13.782559,53.241914],
        content:"位置4",
        offset: [-10,-20],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [151.107195,-33.80666],
        content:"位置5",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-124.740278,50.413675],
        content:"位置6",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-115.243971,32.761748],
        content:"位置7",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-72.606031,42.087923],
        content:"位置8",
        offset: [10,-10],
        direction:"left"
    }];
mapboxgl.accessToken = '你的token值，自己去官网申请';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [14.212459,24.208158], // starting position [lng, lat]
    zoom: 1,
    maxZoom:5
});


    markers.forEach(function(marker) {
    	const marker_on = new mapboxgl.Marker({
			color: marker.color,
			anchor:"center",
			draggable: false,
		}).setLngLat(marker.position)
		.addTo(map);

		const el = marker_on.getElement();
		el.addEventListener('click', () => {
		window.alert(marker.content);
		});

		const popup = new mapboxgl.Popup({anchor:marker.direction,offset: marker.offset, className: 'info',closeButton:false,closeOnClick:false,maxWidth:'200px'})
		.setLngLat(marker.position)
		.setHTML(marker.content)
		.addTo(map);
        

    });


</script>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END