vue使用百度地图（vue-baidu-map）

最新推荐文章于 2025-03-23 09:00:00 发布

王等等csdn

最新推荐文章于 2025-03-23 09:00:00 发布

阅读量7.4k

点赞数 6

文章标签： vue.js 百度 javascript

本文链接：https://blog.youkuaiyun.com/qq_38475901/article/details/126583423

版权

本文档介绍了如何在Vue项目中安装和使用vue-baidu-map插件，包括全局引入、基本使用、覆盖物操作，如点、折线、信息窗体，以及第三方组件库的应用。同时，文中提到了在使用过程中遇到的地图缩放后出现的显示问题，如缩放级别5时的空白区域和文字重叠现象，期待社区的解决方案。

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

一. 插件安装

npm i --save vue-baidu-map-v3

vue-baidu-map-v3使用的百度地图 JavaScript API v3.0

二. main.js全局引入

import BaiduMap from 'vue-baidu-map-v3'

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

三. 基本使用

<template>
	<div class="container">
		<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
	</div>
</template>
<script>
export default {
   
	data() {
   
		return {
   
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {
   lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null
		}
	},
	methods: {
   
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({
    BMap, map}) {
   
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    }
	}
}
</script>
<style>
	.container {
   
		width: 100%;
		height: 100%;
	}
	.bm-view {

最低0.47元/天解锁文章