{"id":12395,"library":"vue-amap","title":"Vue AMap Component Library","description":"Vue AMap (vue-amap) is a component library designed for Vue 2.0 applications, providing an abstraction layer for the Gaode (Amap) Map JavaScript API. It enables declarative rendering of various map elements such as markers, polylines, polygons, circles, info windows, and more, leveraging Vue's reactivity system. The current stable version is 0.5.10. This package specifically targets the Vue 2 ecosystem and integrates with the Gaode Maps service, which is primarily used in China. The project appears to have ceased active development and maintenance, making it suitable mainly for legacy Vue 2 applications already using Gaode Maps.","status":"abandoned","version":"0.5.10","language":"javascript","source_language":"en","source_url":"https://github.com/ElemeFE/vue-amap","tags":["javascript"],"install":[{"cmd":"npm install vue-amap","lang":"bash","label":"npm"},{"cmd":"yarn add vue-amap","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-amap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications, as this is a Vue plugin.","package":"vue","optional":false},{"reason":"Runtime polyfills for older JavaScript features, specified as ^2.5.0.","package":"core-js","optional":false}],"imports":[{"note":"While CommonJS `require` might work in some older Node environments, the library primarily encourages ES module `import` syntax for Vue CLI/Webpack setups. The library is abandoned and targets Vue 2, so CJS usage is less common in modern (even Vue 2) frontend builds.","wrong":"const VueAMap = require('vue-amap');","symbol":"VueAMap","correct":"import VueAMap from 'vue-amap';"},{"note":"Vue AMap is a Vue plugin and registers all its components globally. Individual components like `el-amap` are not directly imported as named exports; they become available after `Vue.use()`.","wrong":"import { Amap } from 'vue-amap';","symbol":"Vue.use(VueAMap)","correct":"import VueAMap from 'vue-amap';\nimport Vue from 'vue';\nVue.use(VueAMap);"},{"note":"The `initAMapApiLoader` function is a static method of the `VueAMap` object, responsible for loading the Gaode Map JavaScript API and its specified plugins. It must be called before map components are rendered.","wrong":"Vue.initAMapApiLoader({});","symbol":"VueAMap.initAMapApiLoader","correct":"VueAMap.initAMapApiLoader({\n  key: 'YOUR_GAODE_KEY',\n  plugin: ['AMap.Autocomplete'],\n  v: '1.4.4'\n});"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueAMap from 'vue-amap';\n\nVue.use(VueAMap);\n\n// Initialize vue-amap, load the Gaode Map SDK\nVueAMap.initAMapApiLoader({\n  key: 'YOUR_GAODE_KEY_HERE', // Replace with your actual Gaode Map key\n  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.ToolBar'],\n  v: '1.4.4' // Specify Gaode SDK version\n});\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      zoom: 12,\n      center: [116.397428, 39.90923],\n      markers: [{ position: [116.397428, 39.90923] }]\n    };\n  },\n  template: `\n    <div style=\"width: 800px; height: 600px;\">\n      <el-amap :zoom=\"zoom\" :center=\"center\">\n        <el-amap-marker v-for=\"(marker, index) in markers\" :key=\"index\" :position=\"marker.position\"></el-amap-marker>\n      </el-amap>\n    </div>\n  `\n});","lang":"javascript","description":"This quickstart demonstrates how to install, initialize, and integrate vue-amap into a Vue 2 application. It shows global registration, loading the AMap API with a key and plugins, and rendering a basic map with a marker."},"warnings":[{"fix":"For new projects or migrations, consider alternative map libraries that support Vue 3 (e.g., vue-google-maps, vue-leaflet) or directly integrate the Gaode Map JavaScript API without a specific Vue 2 wrapper if Gaode Maps is a hard requirement. If using Vue 2, proceed with caution and be prepared for potential unaddressed bugs or security issues.","message":"This package is abandoned. The last commit was in August 2021, and it specifically targets Vue 2, which reached End-of-Life (EOL) in December 2023. It is not compatible with Vue 3 or newer versions.","severity":"breaking","affected_versions":">=0.5.10"},{"fix":"Obtain a valid Gaode Map API key from the official Gaode developer platform. Ensure the key is correctly passed to `VueAMap.initAMapApiLoader`.","message":"Requires a Gaode Map API key (`key` parameter in `initAMapApiLoader`). This key is essential for the map to load and function correctly. Gaode Maps (Amap) is primarily focused on the Chinese market, and keys might have geographical restrictions.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"While `v: '1.4.4'` is the default, you can try specifying a newer version in `initAMapApiLoader` (e.g., `v: '2.0'` or `v: 'latest'`) but be aware of potential compatibility issues with the `vue-amap` wrapper itself.","message":"The default Gaode SDK version specified is `1.4.4`. This version might be outdated, potentially lacking new features, performance improvements, or crucial security updates available in later SDK versions. It's unclear if the library is fully compatible with newer Gaode SDK versions.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure that your project's component naming conventions do not clash with `vue-amap`'s 'el-amap-' prefixed components. There's no built-in way to scope or selectively register components from this plugin.","message":"The library registers all its components globally when `Vue.use(VueAMap)` is called. This can lead to naming conflicts if other libraries use similar component names (e.g., `<el-amap>` and `<el-button>` from Element UI, though the prefix 'el-' here is for 'Element' and not 'Element UI').","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import Vue from 'vue';` is present at the top of your script if you're using a module bundler, or that Vue is loaded via a script tag before your application code in a global context.","cause":"`Vue` object is not globally available or imported when `Vue.use(VueAMap)` is called.","error":"ReferenceError: Vue is not defined"},{"fix":"Verify that `VueAMap.initAMapApiLoader` is called exactly once before any map components are rendered, that `YOUR_GAODE_KEY_HERE` is a valid key, and check network requests for failures to load `https://webapi.amap.com/maps?v=...`.","cause":"The Gaode Map JavaScript API has not been loaded successfully, often because `VueAMap.initAMapApiLoader` was not called, called with an invalid key, or failed to load the external script.","error":"ReferenceError: AMap is not defined"},{"fix":"Ensure `Vue.use(VueAMap);` is called at the very beginning of your application setup, before any Vue instances or components that use `vue-amap` components are created.","cause":"The `vue-amap` plugin was not registered with Vue, meaning `Vue.use(VueAMap)` was skipped or executed after the component was attempted to be used.","error":"[Vue warn]: Unknown custom element: <el-amap> - did you register the component correctly?"},{"fix":"Double-check that all data bound to `vue-amap` components (e.g., `:center`, `:position`, `:path`) is correctly initialized with arrays or objects as expected by the component, and that it's reactive data.","cause":"This often occurs when map data (e.g., `center`, `markers`, `paths`) is `undefined` or not in the expected format when a `vue-amap` component tries to render it.","error":"TypeError: Cannot read properties of undefined (reading 'map')"}],"ecosystem":"npm"}