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

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

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

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

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

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

 

先给大家看看效果:

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>

 

未经允许不得转载:yiweibang.com易微帮 » mapbox全球地图添加多个标注点并显示标签
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!
分享到:
赞(0)

评论抢沙发

评论前必须登录!