30 Star 237 Fork 42

gyy / vue-amap

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

@vuemap/vue-amap

npm (tag) NPM downloads JS gzip size NPM star

文档

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-amap
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// 初始化vue-amap
initAMapApiLoader({
  // 高德的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 {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>

简介

vuemap/vue-amap是一套基于Vue和高德地图2.0的地图组件,vue2对应0.0.x版本,vue3对应1.0.x版本 展开 收起
JavaScript 等 5 种语言
MIT
取消

发行版 (49)

全部

vue-amap

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/guyangyang/vue-amap.git
git@gitee.com:guyangyang/vue-amap.git
guyangyang
vue-amap
vue-amap
dev

搜索帮助