mapbox gl js_Mapbox GL JS的Vue.js组件
mapbox gl js
Mapbox GL JS Vue.js (Mapbox GL JS Vue.js)
A Vue.js Mapbox component.
Vue.js Mapbox组件。
Installation
安装
NPM
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