Встраивание объекта mapbox-gl в страницу Vue? - PullRequest
Новая
       7

Встраивание объекта mapbox-gl в страницу Vue?

0 голосов
/ 05 июня 2018

Я хочу встроить карту mapbox-gl в мою страницу Vue.Как мне получить его, чтобы создать новый объект и прикрепить его к 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>

1 Ответ

0 голосов
/ 05 июня 2018

Примерили ли вы 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());
    }
}

, оно отлично работает ^^

...