在Vue页面中嵌入mapbox-gl对象?

时间:2018-06-05 08:41:49

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

我想在我的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>

1 个答案:

答案 0 :(得分:0)

您是否尝试过{% load custom_tags %} {{ myDict2|get_item:"key2"|get_item:"key22"}} 事件?

mounted

它工作正常^^