vue集成百度地图vue-baidu-map

最新推荐文章于 2025-06-18 18:22:37 发布

stormkai

最新推荐文章于 2025-06-18 18:22:37 发布

阅读量2.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/stormkai/article/details/138198771

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成并配置vue-baidu-map，包括设置npm数据源、全局注册、页面导入和地图组件的基本使用，以实现地图显示和定位功能。

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

vue集成百度地图vue-baidu-map

1. Vue Baidu Map文档地址

https://dafrok.github.io/vue-baidu-map/#/zh/index

2. 设置npm数据源

npm config set registry=https://registry.npmmirror.com

查看npm数据源

npm config get registry

3. 安装vue-baidu-map

npm install vue-baidu-map --save

4. 配置vue-baidu-map

4.1 main.js全局注册

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: ''
})

4.2 vue页面设置

index.vue

<template>
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
			<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
			<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
			<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
		</baidu-map>
</template>
  <script>
  export default {
	name: 'Index',
	components: {
	},
	data() {
	  return {
		lineChartData: lineChartData.newVisitis,
		center: {lng: 108.889191, lat:34.274342},
		zoom: 15
	  }
	},
  }
  </script>
<style>
  .bm-view {
	width: 100%;
	height: 500px;
  }
  </style>

4.3 效果

在这里插入图片描述