vue实现mapBox地图的使用及通过H5获取位置信息并回显至mapBox地图中

/*
	1、下载mapbox
		npm install --save mapbox-gl 或 cnpm install --save mapbox-gl 
		
	2、修改语言为中文
    	2.1、下载语言包cnpm install --save mapbox-gl
   		2.2、安装语言包 cnpm install --save mapbox-gl @mapbox/mapbox-gl-language
*/

<template>

    <div>
        <div id="map"></div>
    </div>

</template>

<script type="text/ecmascript-6">

    //npm install --save mapbox-gl 或 cnpm install --save mapbox-gl 下载mapbox
    
    /*修改语言为中文
        1、下载语言包cnpm install --save mapbox-gl
        2、安装语言包 cnpm install --save mapbox-gl @mapbox/mapbox-gl-language
    */

    import mapboxgl from "mapbox-gl";//引入mapbox
    import MapboxLanguage  from '@mapbox/mapbox-gl-language';//引入语言包


    export default {
        name: 'mapboxgl',
        data(){
            return{
                lat:0,//纬度
                lag:0,//经度
            }
        },
        mounted () {
            this.locationFn().then(res=>{
                this.initmap()
            }).catch(err=>{
                alert('位置信息获取失败')
            });
        },

        methods: {
            initmap(){
                mapboxgl.accessToken = '';//需要修改为自己的token

                let map = new mapboxgl.Map({
                    container: 'map', // 绑定的组件的id
                    style: 'mapbox://styles/mapbox/outdoors-v10', //地图样式，可以使用官网预定义的样式,也可以自定义
                    center: [this.lag,this.lat], // 初始坐标系
                    zoom: 15,     // starting zoom 地图初始的拉伸比例
                    pitch: 0,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
                    bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
                    antialias: true, //抗锯齿，通过false关闭提升性能

                });


                let language = new MapboxLanguage({ defaultLanguage: "zh" });//地图加到显示为中文
                map.addControl(language);

                //地图的标点
                let marker = new mapboxgl.Marker()
                    .setLngLat([this.lag,this.lat])
                    .addTo(map);

                //3D地图
                /*map.on('load', function() {
                    //on设置监听，以及触发时的回调，这是加载时的触发的生成3d地图
                    var layers = map.getStyle().layers;

                    var labelLayerId;
                    for (var i = 0; i < layers.length; i++) {
                        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                            labelLayerId = layers[i].id;
                            break;
                        }
                    }

                    //在地图样式中添加一个Mapbox样式图层。(图层，layerid)
                    map.addLayer(
                        {
                            'id': '3d-buildings',
                            'source': 'composite',
                            'source-layer': 'building',
                            'filter': ['==', 'extrude', 'true'],
                            'type': 'fill-extrusion',
                            'minzoom': 15,
                            'paint': {
                                'fill-extrusion-color': '#aaa',
                                'fill-extrusion-height': [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    15.05,
                                    ['get', 'height']
                                ],
                                'fill-extrusion-base': [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    15.05,
                                    ['get', 'min_height']
                                ],
                                'fill-extrusion-opacity': 0.6
                            }
                        },
                        labelLayerId
                    );
                });*/

                //地图监听点击，触发回调
                map.on('click', function(e) {
                    console.log(e)
                });

            },

			//获取位置信息异步函数
            locationFn(){
                let that=this;
                return new Promise(function(res,err){
                    //获取位置信息失败的回调函数
                    function showError(error){

                        switch(error.code) {

                            case error.PERMISSION_DENIED:
                                alert("定位失败,用户拒绝请求地理定位");
                                err();
                                break;
                            case error.POSITION_UNAVAILABLE:
                                alert("定位失败,位置信息是不可用");
                                err();
                                break;
                            case error.TIMEOUT:
                                alert("定位失败,请求获取用户位置超时");
                                err();
                                break;
                            case error.UNKNOWN_ERROR:
                                alert("定位失败,定位系统失效");
                                err();
                                break;
                        }

                    }

                    //获取位置信息成功的回调函数
                    function showPosition(position){
                        that.lat = position.coords.latitude;
                        that.lag = position.coords.longitude;
                        res()
                    }

                    //获取位置信息
                    if (navigator.geolocation){
                        navigator.geolocation.getCurrentPosition(showPosition,showError,{enableHighAccuracy: true});
                    }else{
                        alert("浏览器不支持地理定位。");
                        err();
                    }
                })

            }
        }
    }
</script>

<style  scoped>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
    #map{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>