Vue 调用百度地图API

PinelliaLogic

已于 2024-04-28 17:59:30 修改

阅读量761

点赞数 3

CC 4.0 BY-SA版权

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

于 2024-03-29 15:24:51 首次发布

本文链接：https://blog.csdn.net/m0_55649935/article/details/137146312

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成和使用百度地图API，包括注册账号、创建应用获取AK、在HTML中引入API、创建地图组件并添加标记点，以及在其他页面中引入和使用地图功能。

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

实现效果

1、注册百度地图API账号

2、控制台创建应用

生成1个AK

3、在index.html中添加百度地图api(引入放在第一行，不然异步加载会失败）

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK"></script>

4、创建地图组件

<template>
  <div id="mapContainer" style="width: 600px;height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null, // 地图实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new BMap.Map("mapContainer");
      this.map.centerAndZoom(new BMap.Point(102.710124,25.054646), 21);
      this.map.enableScrollWheelZoom(true);

      // 添加标点
      var point = new BMap.Point(102.710124,25.054646);  // 创建标点
      var marker = new BMap.Marker(point);  // 创建Marker对象
      this.map.addOverlay(marker);  // 将Marker添加到地图上

      // 如果你还想给标点添加名称，可以使用InfoWindow
      var infoWindow = new BMap.InfoWindow("翠湖");  // 创建信息窗口对象
      marker.addEventListener("click", function() {
        this.openInfoWindow(infoWindow);
      });
    },
  },
}
</script>

5、在其他vue中引入该组件使用即可