在 Vue 页面中嵌入 mapbox-gl 对象？答案

【问题标题】：Embedding mapbox-gl object in Vue page?在 Vue 页面中嵌入 mapbox-gl 对象？
【发布时间】：2018-06-05 08:41:49
【问题描述】：

我想在我的 Vue 页面中嵌入一个 mapbox-gl 地图。如何让它创建新对象并将其附加到 DOM？我需要创建新的 mapboxgl.Map() 对象并将其与 DOM 元素相关联。

谢谢！

我的代码：

<template>
<div id="map">

</div>
</template>

<script>
export default {
    head () {
        return {
            script: [
                { src: 'https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js' }
            ],
            link: [
                { rel: 'stylesheet',
                href: "https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" }
            ]
        }
    }, 
    map () {
        return new mapboxgl.Map({
            container: 'map',
            center: [10.18440, -0],
            zoom: 0.89,
            interactive: false,
            attributionControl:false
            });
        } 
    }
</script>

<style>
    #map {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
    }
</style>

【问题讨论】：

标签： vue.js mapbox-gl-js nuxt.js

【解决方案1】：

您尝试过mounted 活动吗？

export default {
    head () {
       ...
    },
    methods: {
        map: function () {

            mapboxgl.accessToken = '<your access token here>'; // optional

            return new mapboxgl.Map({
                container: 'map',
                center: [10.18440, -0],
                zoom: 0.89,
                interactive: false,
                attributionControl:false,

                // set your own style:

                style: 'http://osm-liberty.lukasmartinelli.ch/style.json' // free
                //style: 'mapbox://styles/mapbox/streets-v9'// access token required
            });
        }
    },
    mounted () {
      let map = this.map()
      map.addControl(new mapboxgl.NavigationControl());
    }
}

效果很好^^

【讨论】：