39 Star 386 Fork 79

gyy / vue-amap

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

@vuemap/vue-amap

npm (tag) NPM downloads JS gzip size NPM star GitHub Repo stars

文档

https://vue-amap.guyixi.cn

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

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

觉得有用可以给个star

捐赠支持

支付宝 微信

安装

// 安装核心库
npm i -S @vuemap/vue-amap
// 安装loca相关库
npm i -S @vuemap/vue-amap-loca
// 安装其他扩展库,主要为threejs相关
npm i -S @vuemap/vue-amap-extra

快速上手

引入@vuemap/vue-amap

// 引入vue-amap
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// 初始化vue-amap
initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库,需要加载Loca
});
createApp(App).use(VueAMap)

自动导入

首先你需要安装unplugin-vue-componentsunplugin-auto-import@vuemap/unplugin-resolver这三款插件

注意,对于使用@vuemap/vue-amap@1版本的来说,@vuemap/unplugin-resolver版本必须使用1.x.x版本

使用@vuemap/vue-amap@latest 版本

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver

使用@vuemap/vue-amap@1 版本

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1

然后在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>
MIT License Copyright (c) 2021 gyy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

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

发行版 (63)

全部

贡献者

全部

近期动态

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

搜索帮助