vue中使用mapboxGL，并添加marker

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)
	} 
}