• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-bmap-gl: vue-bmap-gl是一套支持Vue2、Vue3和百度地图WebGL版本的地图组件 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-bmap-gl

开源软件地址:

https://gitee.com/guyangyang/vue-bmap-gl

开源软件介绍:

vue-bmap-gl

npm (tag)NPM downloadsJS gzip sizeNPMstar

vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。该版本对原组件进行升级,主要适配Vue3,同时调整事件绑定形式,调整为使用v-on进行事件绑定。支持全量导入、按需导入和自动导入

vue2请使用0.x版本,对应分支vue2

觉得有用可以给个star

群号

avatar

捐赠支持

支付宝微信

安装

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-componentsunplugin-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>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap