Nuxt Maplibre
一個使用 MapLibre 的 Nuxt 模組。它基於 vue-maplibre-gl 開發,vue-maplibre-gl 是 MapLibre 的 Vue 3 封裝器,其將原始的 MapLibre API 作為 Vue 組件公開。
此模組的目的僅在於使其能在 Nuxt 中運作,而無需進行任何設定。
功能
- ⚡ 無需設定
- 🦺 Typescript 支援
- 🚠 自動匯入
快速設定
npx nuxi@latest module add nuxt-maplibre
完成!您現在可以在您的 Nuxt 應用程式中使用 MapLibre 了 ✨
使用方式
如需完整的可用組件列表,請查看 vue-maplibre-gl 文件。
基本
<template>
<MglMap
:map-style="style"
:center="center"
:zoom="zoom"
>
<MglNavigationControl />
</MglMap>
</template>
<script setup>
const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
const center = [-1.559482, 47.21322];
const zoom = 8;
</script>
開發
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release