vue项目中使用百度地图功能

最新推荐文章于 2025-05-09 15:39:51 发布

原创最新推荐文章于 2025-05-09 15:39:51 发布 · 3.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #百度 #javascript

前端技术积累同时被 3 个专栏收录

160 篇文章

订阅专栏

vue

89 篇文章

订阅专栏

地图

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过vue-baidu-map插件集成百度地图API，包括关键步骤：获取私密key、组件注册和使用实例。注意事项包括地图容器高度设定、中心位置设置和异步加载地图功能。

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

1、百度地图api官方文档：

https://lbsyun.baidu.com/index.php?title=jspopularGL

在百度地区去申请一个百度地图key。这个key属于私密的，部分高级功能需要找百度地图花钱购买。

2、在vue项目中，我们使用`vue-baidu-map`这个封装后的npm包

使用方式：
npm install vue-baidu-map --save

全局注册

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

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '申请的百度key'
})

示例：

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

页面显示：
在这里插入图片描述全景功能是后加的。

注意：

BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整zoom 的值。
由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

vue-baidu-map中文文档地址：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation