mapbox-gl怎么创建Marker

发布时间：2021-07-27 21:44:18 来源：亿速云阅读：246 作者：chen 栏目：大数据

这篇文章主要介绍“mapbox-gl怎么创建Marker”，在日常操作中，相信很多人在mapbox-gl怎么创建Marker问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”mapbox-gl怎么创建Marker”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

mapbox-gl提供了两种在地图上创建poi方式：使用图层（Layers）中的symbol样式，另一种是使用Marker的形式，图层的数据源是geojson数据，Marker是以坐标点的形式加载到地图上。

这两者的区别是：图层（Layers）适用于批量加载poi数据，poi只能在地图显示成图标或者文字，或者是两者的混合，poi加载的数据量可以达到很多； Marker是一个一个的根据坐标加载到地图上，poi的样式比较丰富，完全根据html中排版和css样式进行设计，poi的加载数据量比较小。

在地图上创建一个基本自带Marker：

mapbox-gl怎么创建Marker

var marker = new mapboxgl.Marker()

.setLngLat([30.5, 50.5])

.addTo(map);

通过浏览的开发调试，可以发现在页面上加载了一个html元素，在地图移动时，通过css中的translate rotate等变换参数进行变化，达到跟随上地图相应的坐标点。

mapbox-gl怎么创建Marker

在Marker的api中，通过 element的属性，可以设置自定义的html元素，从页面文档中选取，或者通过createElement进行元素创建：

var el = document.createElement('div');

el.className = 'marker';

同时，在html的元素上加载css3，能实现一些更良好的效果，同时能加上动态的标签效果。

毕竟Marker是通过html元素的形式进行加载的，当同一地方聚集很多的时候，页面会有些卡顿，而使用图层就不会存在这种问题。

到此，关于“mapbox-gl怎么创建Marker”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！

向AI问一下细节

猜你喜欢