代码拉取完成,页面将自动刷新
vue-mapvgl@next是一套基于Vue3 和百度mapvgl的地图组件。 该组件依赖于vue-bmap-gl@next,使用方式请查看教程 该版本对原组件进行升级,主要适配Vue3。
vue2请使用0.x版本,对应分支vue2
觉得有用可以给个star
npm i -S vue-mapvgl@next
引入vue-bmap-gl@next、vue-mapvgl@next
// 引入vue-bmap-gl
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import VueMapvgl from 'vue-mapvgl';
import 'vue-bmap-gl/dist/style.css';
// 初始化vue-bmap-gl
initBMapApiLoader({
// 百度的key
ak: 'YOUR_KEY',
});
createApp(App).use(VueBMap).use(VueMapvgl)
首先你需要安装unplugin-vue-components
、 unplugin-auto-import
、 @vuemap/unplugin-resolver
这三款插件
npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver
然后在main.ts中导入css和进行初始化key
import App from './App.vue'
import {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
ak: 'YOUR_KEY'
})
createApp(App)
.mount('#app')
再修改配置文件,把下列代码插入到你的 Vite 或 Webpack 的配置文件中
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueBmapGlResolver, VueMapvglResolver} from '@vuemap/unplugin-resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [VueBmapGlResolver(),VueMapvglResolver()],
}),
Components({
resolvers: [VueBmapGlResolver(),VueMapvglResolver()],
}),
]
})
目前完成组件:
##mapvgl自带后处理器效果
##mapvgl自带工具
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型