mapbox gl js_Mapbox GL JS的Vue.js组件

最新推荐文章于 2023-07-04 17:09:03 发布

cuk5239

最新推荐文章于 2023-07-04 17:09:03 发布

阅读量364

点赞数

文章标签： vue js javascript html css ViewUI

原文链接：https://vuejsexamples.com/a-vue-js-component-for-mapbox-gl-js/

版权

本文档介绍了如何在Vue.js应用中使用Mapbox GL JS组件。首先，需要通过NPM安装，并在HTML文件中引入Mapbox GL JS和CSS文件。接着，通过全局引入Mapbox Gl到主JS文件。若使用Vueify，可按指定方式包含Mapbox组件。为显示地图，需在CSS中设置容器的高度和宽度。

摘要由CSDN通过智能技术生成

mapbox gl js

Mapbox GL JS Vue.js (Mapbox GL JS Vue.js)

A Vue.js Mapbox component.

Vue.js Mapbox组件。

Installation

安装

NPM

npm install mapbox-gl-vue --save

建立 (Setup)

This package does not include the Mapbox GL JS and CSS files. They need to be included in the <head> of your HTML file. See Mapbox GL quickstart guide here: https://www.mapbox.com/mapbox-gl-js/api/

该软件包不包括Mapbox GL JS和CSS文件。它们需要包含在HTML文件的<head>中。请参阅此处的Mapbox GL快速入门指南： https ：//www.mapbox.com/mapbox-gl-js/api/

If you decide to pull in Mapbox Gl via npm and use a module bundler you need to require it globally from your main js file like this: window.mapboxgl = require('mapbox-gl');

如果您决定通过npm插入Mapbox Gl并使用模块捆绑程序，则需要从主js文件中全局要求它，如下所示： window.mapboxgl = require('mapbox-gl');

In your main js file:

在您的主要js文件中：

import Mapbox from 'mapbox-gl-vue';
const app = new Vue({
    el: '#app',
    components: {
        'mapbox': Mapbox
    },
]);

In your HTML file:

在您HTML文件中：

<!-- #app -->
<div id="app">
	<mapbox></mapbox>
</div>

Vueify (Vueify)

If you are using Vueify in your build script the Mapbox component can be included as follows:

如果在构建脚本中使用Vueify ，则可以按以下方式包含Mapbox组件：

Vue.component('mapbox', require('mapbox-gl-vue/src/components/Mapbox.vue'));
const app = new Vue({
    el: '#app'
]);

CSS (CSS)

CSS needs to be added for the map to show up. The #map container needs a height and a width. Example:

需要添加CSS才能显示地图。 #map容器需要高度和宽度。例：

#map {
	width: 100%;
	height: 500px;
}

翻译自: https://vuejsexamples.com/a-vue-js-component-for-mapbox-gl-js/

mapbox gl js

cuk5239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫