{"id":18081,"library":"vue-mapvgl","title":"Vue Components for Baidu MapVGL (Vue 2)","description":"vue-mapvgl is a Vue 2 component library designed to integrate Baidu's MapVGL 3D geographic information visualization library with Vue applications via vue-bmap-gl. It provides a set of pre-built components (e.g., `el-bmapv-point-layer`, `el-bmapv-heat-map-layer`) that simplify the process of adding advanced 3D data visualizations like heatmaps, flow lines, and complex geometric layers onto Baidu Maps GL instances. The package is currently at version 0.0.34, which is specific to Vue 2 environments. The project's 0.x line has been officially announced as unmaintained due to Baidu's documentation certification requirements, making it an abandoned package for Vue 2 development. A separate `@next` version exists for Vue 3, but this registry entry pertains to the 0.x series. It relies heavily on `vue-bmap-gl` for the underlying Baidu Maps GL instance.","status":"abandoned","version":"0.0.34","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","mapvgl"],"install":[{"cmd":"npm install vue-mapvgl","lang":"bash","label":"npm"},{"cmd":"yarn add vue-mapvgl","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-mapvgl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the foundational Baidu Maps GL instance that vue-mapvgl components operate on.","package":"vue-bmap-gl","optional":false}],"imports":[{"note":"CommonJS require() is not the idiomatic way for Vue plugins in modern setups; use ES Module imports. For Vue 2, VueMapvgl is usually globally registered with `Vue.use()`.","wrong":"const VueMapvgl = require('vue-mapvgl')","symbol":"VueMapvgl","correct":"import VueMapvgl from 'vue-mapvgl'"},{"note":"While not part of `vue-mapvgl` directly, `VueBMap` from the peer dependency `vue-bmap-gl` is essential for setup and typically imported as a default export for `Vue.use()`.","wrong":"import { VueBMap } from 'vue-bmap-gl'","symbol":"VueBMap","correct":"import VueBMap from 'vue-bmap-gl'"},{"note":"Components are globally registered via `Vue.use(VueMapvgl)` and used directly in templates. No direct import of individual components is typically required or supported.","symbol":"el-bmapv-point-layer","correct":"<el-bmapv-point-layer :data=\"pointData\"></el-bmapv-point-layer>"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport VueBMap from 'vue-bmap-gl';\nimport VueMapvgl from 'vue-mapvgl';\nimport 'vue-bmap-gl/dist/style.css';\n\nVue.use(VueBMap);\nVue.use(VueMapvgl);\n\nVueBMap.initBMapApiLoader({\n  // Replace 'YOUR_BAIDU_MAP_AK' with your actual Baidu Maps API Key\n  // Get a key from: http://lbsyun.baidu.com/apiconsole/key#/home\n  ak: process.env.VUE_APP_BAIDU_MAP_AK ?? 'YOUR_BAIDU_MAP_AK_MISSING',\n  v: '1.0' // Baidu SDK version, default is 1.0\n});\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n// In App.vue\n<template>\n  <div id=\"app\">\n    <el-bmap vid=\"bmap-demo\" :zoom=\"13\" :center=\"center\" class=\"map-container\">\n      <el-bmapv-view>\n        <el-bmapv-point-layer :data=\"points\" :options=\"layerOptions\"></el-bmapv-point-layer>\n      </el-bmapv-view>\n    </el-bmap>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: [116.404, 39.915], // Beijing coordinates\n      points: [\n        { geometry: { type: 'Point', coordinates: [116.404, 39.915] } },\n        { geometry: { type: 'Point', coordinates: [116.45, 39.92] } },\n        { geometry: { type: 'Point', coordinates: [116.38, 39.90] } }\n      ],\n      layerOptions: {\n        size: 20,\n        color: 'rgba(50, 50, 255, 0.8)',\n        shape: 'circle'\n      }\n    };\n  },\n  mounted() {\n    console.log('Map initialized with vue-mapvgl layers.');\n  }\n};\n</script>\n\n<style>\n.map-container {\n  width: 100vw;\n  height: 100vh;\n}\n</style>","lang":"javascript","description":"Demonstrates the basic setup of `vue-mapvgl` with `vue-bmap-gl` in a Vue 2 application, including global plugin registration and rendering a simple point layer on a Baidu Map GL instance."},"warnings":[{"fix":"For new projects, consider `vue-mapvgl@next` (if actively maintained) or alternative mapping libraries. For existing projects, be aware of the lack of support and potential vulnerabilities.","message":"The `vue-mapvgl` project for Vue 2 (0.x versions) has been officially declared as unmaintained due to Baidu's requirements for open-source documentation certification. This means there will be no further updates, bug fixes, or security patches for this version.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Obtain an application key from the Baidu Maps LBS Cloud platform (lbsyun.baidu.com) and provide it during the `initBMapApiLoader` call.","message":"A Baidu Maps API Key (AK) is strictly required for `vue-bmap-gl` (and thus `vue-mapvgl`) to function. Without a valid AK, the map will not load or function correctly, often leading to blank maps or errors in the console.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always verify the coordinate order of your data. If necessary, swap coordinates to `[longitude, latitude]` before passing them to `vue-mapvgl` layer components.","message":"Coordinate order in `mapvgl` layers is typically `[longitude, latitude]` (`[lng, lat]`). However, some Baidu Map API methods or external data sources might provide coordinates in `[latitude, longitude]` (`[lat, lng]`) order, leading to incorrect rendering.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueBMap);` and `Vue.use(VueMapvgl);` are called before creating the Vue instance, typically in `main.js`.","cause":"`vue-bmap-gl` (or `vue-mapvgl`) plugins were not registered correctly with Vue.","error":"[Vue warn]: Unknown custom element: <el-bmap>"},{"fix":"Check your network connection. Ensure `VueBMap.initBMapApiLoader({ ak: 'YOUR_KEY' })` is called with a valid, active Baidu Maps API Key and that the key has appropriate permissions.","cause":"The Baidu Maps JavaScript API loader failed, most likely due to a missing or incorrect API Key (AK), or a network issue preventing the script from loading.","error":"Baidu Map API is not loaded or ak is invalid."},{"fix":"Verify that `vue-bmap-gl` and `vue-mapvgl` are installed and registered correctly. Ensure the Baidu Maps API (including WebGL version) is loaded and the `mapvgl` script is accessible.","cause":"The underlying `mapvgl` library or its components are not correctly initialized or accessible within the `vue-mapvgl` wrapper, possibly due to incorrect dependency setup or API loading issues.","error":"TypeError: Cannot read properties of undefined (reading 'View')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}