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

vue-amap: vuemap/vue-amap是一套基于Vue和高德地图2.0的地图组件,vue2对应0.0.x版本 ...

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

开源软件名称:

vue-amap

开源软件地址:

https://gitee.com/guyangyang/vue-amap

开源软件介绍:

@vuemap/vue-amap

npm (tag)NPM downloadsJS gzip sizeNPMstar

文档

https://vue-amap.guyixi.cn

@vuemap/vue-amap@next是一套基于Vue3 和高德地图2.0的地图组件。该版本对原vue-amap组件进行升级,主要适配amap2.0相关的接口,同时调整事件绑定形式,调整为使用v-on进行事件绑定。组件中将会对高德可视化组件loca进行封装,同时提供threejs的接口该项目基于 https://github.com/ElemeFE/vue-amap/ 开发支持全量导入、按需导入和自动导入

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

觉得有用可以给个star

群号

avatar

捐赠支持

支付宝微信

安装

npm i -S @vuemap/vue-amap@next

快速上手

引入@vuemap/vue-amap@next

// 引入vue-amapimport VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';import '@vuemap/vue-amap/dist/style.css';// 初始化vue-amapinitAMapApiLoader({  // 高德的key  key: 'YOUR_KEY',});createApp(App).use(VueAmap)

自动导入

首先你需要安装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 {initAMapApiLoader} from '@vuemap/vue-amap';import '@vuemap/vue-amap/dist/style.css'initAMapApiLoader({    key: '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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import {VueAmapResolver} from '@vuemap/unplugin-resolver'// https://vitejs.dev/config/export default defineConfig({  plugins: [    vue(),    AutoImport({      resolvers: [VueAmapResolver()],    }),    Components({      resolvers: [VueAmapResolver()],    }),  ]})

组件

地图

<el-amap  :zoom="zoom" :center="center"></el-amap>

鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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