开源软件名称:vue-bmap-gl
开源软件地址:https://gitee.com/guyangyang/vue-bmap-gl
开源软件介绍:
vue-bmap-gl
vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。该版本对原组件进行升级,主要适配Vue3,同时调整事件绑定形式,调整为使用v-on进行事件绑定。支持全量导入、按需导入和自动导入
vue2请使用0.x版本,对应分支vue2
群号捐赠支持安装npm i -S vue-bmap-gl@next 文档https://vue-bmap-gl.guyixi.cn 快速上手引入vue-bmap-gl@next // 引入vue-bmap-glimport VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';import 'vue-bmap-gl/dist/style.css';// 初始化vue-bmap-glinitBMapApiLoader({ // 高德的key ak: 'YOUR_KEY',});createApp(App).use(VueBMap) 自动导入首先你需要安装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} from '@vuemap/unplugin-resolver'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [VueBmapGlResolver()], }), Components({ resolvers: [VueBmapGlResolver()], }), ]}) 组件地图<el-bmap :zoom="zoom" :center="center"></el-bmap> |
请发表评论