资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

mapbox-gl怎么创建Marker

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

创新互联建站长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为庆元企业提供专业的网站建设、成都网站制作庆元网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

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”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享名称:mapbox-gl怎么创建Marker
转载来于:http://cdkjz.cn/article/igsccs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220