vue-baidu-map--------vue百度地图插件

最新推荐文章于 2025-06-17 14:05:30 发布

原创最新推荐文章于 2025-06-17 14:05:30 发布 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue地图

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中安装并使用百度地图组件。通过npm安装依赖包，并在项目中进行正确的配置及引用，实现地图的基本展示。同时，强调了地图容器设置宽度和高度的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm i --save vue-baidu-map

引入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'YOUR_APP_KEY'
})

代码

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>