vue中使用mapboxGL，并添加marker

布满荆棘的人生 2024-04-17 20:17 62阅读 0赞

1、 **npm install mapbox-gl --save**  
2、以组件形式引入

<template>
      <div>
        <div ref="basicMapbox" style="height:100%;width:100%;"></div>
      </div>
    </template>

<script>
    import mapboxgl from 'mapbox-gl' // 引入mapboxgl
    export default { 
    	data () { 
    		return { 
    			map: null,
    			positionLocation:  [117, 36]
    		}
    	},
    	mounted () { 
    		this.init()
    	},
    	methods: { 
    		init () { 
    			mapboxgl.accessToken = '******' // 地图秘钥，自行获取 https://docs.mapbox.com/mapbox-gl-js/api/
    	      	this.map = new mapboxgl.Map({ 
    	        	container: this.$refs.basicMapbox, // 获取当前dom元素
    		        style: { 
    		          version: 8,
    		          name: 'Mapbox Streets',
    		          sprite: 'http://60.191.72.104:11009/mapbox/images/iocMapIocn',
    		          glyphs: 'http://60.191.72.104:11009/mapbox/font/{fontstack}/{range}.pbf',
    		          sources: { 
    		            'osm-tiles': { 
    		              type: 'raster',
    		              tiles: [
    		                'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
    		              ],
    		              tileSize: 256
    		            }
    		          },
    		          layers: [
    		            { 
    		              id: 'simple-tiles',
    		              type: 'raster',
    		              source: 'osm-tiles',
    		              minzoom: 0,
    		              maxzoom: 16
    		            }
    		          ]
    		        },
    		        // style: 'http://60.191.72.104:11009/mapbox/images/style1.json',
    		        center: [116.67014887634832, 34.63229347905002],
    		        zoom: 12,
    		        bearing: 0,
    		        pitch: 45
    		      })
    	      	this.map.on('load', () => {  // 地图加载完毕显示相应配置（地图打点、addLayer等等）
    	       	 	this.loadData()
    	      	})
    		}
    	},
    	loadData () { 
    		const el1 = document.createElement('div')
    		el1.className = 'marker'
    		el1.style.backgroundImage = `url(http://60.191.72.104:11009/mapbox/images/iocMapIocn.png)`
    		el1.style.backgroundPosition = '-42px -26px'
    		el1.style.width = '42px'
    		el1.style.height = '90px'
    		// 地图上设置图片
    		this.endMarker = new mapboxgl.Marker({ 
    			element: el1,
    			offset: [0, 13],
    			anchor: 'bottom'
    		}).setLngLat(this.positionLocation).addTo(this.map)
    	} 
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用mapboxGL，并添加marker

、 **npm install mapbox-gl --save** 2、以组件形式引入 <template> <div> <d...

布满荆棘的人生/ 2024年04月17日 20:17/ 0 赞/ 63 阅读

相关 105：vue+openlayers 引用组件来添加marker （示例代码）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第105个 [点击查看专栏目录][Link 1]

╰半橙微兮°/ 2024年04月08日 12:16/ 0 赞/ 65 阅读

相关 leaflet 设置marker，并可以任意拖动每一个marker（071）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第071个 [点击查看专栏目录][Link 1]

一时失言乱红尘/ 2024年03月27日 17:49/ 0 赞/ 88 阅读

相关 013：Mapbox GL添加marker

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第013个 [点击查看专栏目录][Link 1]

Love The Way You Lie/ 2024年03月23日 12:11/ 0 赞/ 74 阅读

相关 066：mapboxGL的marker的drag，dragstart，dragend三种触发事件示例

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第066个 [点击查看专栏目录][Link 1]

深碍√TFBOYSˉ_/ 2024年02月21日 12:19/ 0 赞/ 12 阅读

相关 065：mapboxGL在一个图层中随机添加100个标记（marker）

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第065个 [点击查看专栏目录][Link 1]

梦里梦外;/ 2024年02月21日 11:51/ 0 赞/ 20 阅读

相关从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建

MapboxGL介绍以及前期vue项目的搭建 1、Mapbox-gl简介 2、搭建vue项目 2.1、

短命女/ 2023年10月12日 13:04/ 0 赞/ 33 阅读

相关 vue项目中mapboxgl的几个经典操作代码示例

vue项目中mapboxgl的几个经典操作代码示例 1、创建标记并显示在地图上 2、实现插点效果 3、实现点

蔚落/ 2023年10月11日 23:15/ 0 赞/ 40 阅读

相关 Leaflet中使用awesome-markers插件显示带图标的marker

场景 Vue+Leaflet实现加载OSM显示地图： [Vue+Leaflet实现加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客]

素颜马尾好姑娘i/ 2023年10月01日 12:27/ 0 赞/ 74 阅读

相关 vue-amap点击Marker弹出window窗口显示Marker信息

1. script let windows = [];//window窗体 let nodes0 = []; //防爆物资 burstPrevention -

深藏阁楼爱情的钟/ 2023年07月05日 05:28/ 0 赞/ 29 阅读