Vue框架中添加百度地图组件

最新推荐文章于 2025-06-02 12:38:04 发布

原创最新推荐文章于 2025-06-02 12:38:04 发布 · 置顶 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

百度地图

2 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成百度地图，包括申请百度地图API密钥、引入地图JavaScript API、配置webpack以及在组件中创建地图对象的步骤。

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

申请百度地图密钥

百度地图

在index.html中添加百度地图JavaScript API接口

<!-- 在index.html中添加百度地图JavaScript API接口； -->
<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；

// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象)，在module.exports 中与entry平级；
  externals: {
    'BMap': 'BMap'
  },

在地图组件中import BMap，否则会出现”BMap undefined”；

// 导入BMap组件
import BMap from 'BMap'

创建地图对象，在mounted生命周期调用

// 创建地图对象，在mounted生命周期调用；
  mounted() {
    this.ready()
  },
  methods: {
    ready: function() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(108.840053, 34.129522)
      map.centerAndZoom(point, 14)
      map.addControl(new BMap.MapTypeControl())
      map.enableScrollWheelZoom(true)
      map.enableDoubleClickZoom(true)
      var marker = new BMap.Marker(point)
      map.addOverlay(marker)

      map.centerAndZoom(point, 15)
    }
  }