vue-cli构建vue项目使用百度地图API

最新推荐文章于 2025-05-22 16:42:17 发布

原创最新推荐文章于 2025-05-22 16:42:17 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

vuejs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成百度地图API，包括开发者账号注册、密钥申请及地图组件创建过程。通过实例演示了如何在Vue组件中调用百度地图API，实现地图展示、定位、缩放、标记点及添加文字标签等功能。

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

vue-cli构建vue项目使用百度地图API

在百度地图开放平台注册开发者帐号
申请密钥
在项目的index.html页面添加：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

直接在组件创建一个显示地图的容器

<div id="mapContainer" style="width:100%;height:500px"></div>

在组件写一个调用百度地图API的方法直接调用

mounted() {
    this.bdMap();
  },
methods: {
    bdMap() {
      //创建地图
      let map = new BMap.Map("mapContainer");
      let point = new BMap.Point(113.3309751406,23.1123809784);
      map.centerAndZoom(point, 20); // 创建点坐标
      map.addControl(new BMap.NavigationControl());
      map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
      // 初始化地图， 设置中心点坐标和地图级别
      let marker = new BMap.Marker(point);
      map.addOverlay(marker); //添加覆盖物
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
       //添加覆盖物文字
      let label = new BMap.Label("广州塔", {
        offset: new BMap.Size(20, -25)
      });
      marker.setLabel(label);
    }
  }