如何在vue 项目中使用百度地图，详细步骤

code_nutter
704 阅读2分钟

在 Vue 项目中集成百度地图，可以通过以下详细步骤来实现。这里以基本的百度地图显示为例，适合初学者。

步骤 1：创建 Vue 项目

如果你还没有创建 Vue 项目，可以使用 Vue CLI 创建一个新的项目。

npm install -g @vue/cli  
vue create my-baidu-map-project  
cd my-baidu-map-project

步骤 2：安装依赖

在你的 Vue 项目中，通常可以直接引用百度地图的 JS API，无需额外的依赖包。但如果需要管理依赖，可以考虑一些帮助库，如 vue-baidu-map，但这里我们直接使用官方 API。

步骤 3：获取百度地图 API Key

  1. 前往 百度地图开放平台。
  2. 注册账号并登录。
  3. 创建应用，申请 API Key（AK）。

步骤 4：在 Vue 项目中添加百度地图

  1. 打开 public/index.html 文件，在 <head> 标签中添加百度地图的 JS API 引用，并将你的 AK 替换为你的 API Key。
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue App</title>  
    <script src="https://api.map.baidu.com/api?v=3.0&ak=你的APIKey&callback=initBMap" type="text/javascript" async defer></script>  
</head>  
<body>  
    <noscript>  
        <strong>We're sorry but Vue App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>  
    </noscript>  
    <div id="app"></div>  
</body>  
</html>

步骤 5：创建地图组件

  1. 在 src/components/ 目录下创建一个名为 BaiduMap.vue 的新组件。
<template>  
  <div id="map" style="width: 100%; height: 100vh;"></div>  
</template>  

<script>  
export default {  
  name: 'BaiduMap',  
  mounted() {  
    // 初始化地图  
    this.initMap();  
  },  
  methods: {  
    initMap() {  
      // 创建地图实例  
      const map = new BMap.Map("map");  
      // 创建中心点坐标  
      const point = new BMap.Point(116.404, 39.915);  
      // 初始化地图,设置中心点坐标和地图级别  
      map.centerAndZoom(point, 15);  
      // 添加地图控件  
      map.addControl(new BMap.NavigationControl());  
      map.addControl(new BMap.ScaleControl());  
      map.addControl(new BMap.OverviewMapControl());  
      map.setCurrentCity("北京"); // 用城市名设置地图  
    },  
  },  
};  
</script>  

<style scoped>  
#map {  
    width: 100%;  
    height: 100vh;  
}  
</style>

步骤 6：在 App.vue 中使用地图组件

  1. 打开 src/App.vue 文件，并在其中引入和使用 BaiduMap 组件。
<template>  
  <div id="app">  
    <BaiduMap />  
  </div>  
</template>  

<script>  
import BaiduMap from './components/BaiduMap.vue';  

export default {  
  name: 'App',  
  components: {  
    BaiduMap  
  }  
}  
</script>  

<style>  
#app {  
  font-family: Avenir, Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>

步骤 7：运行项目

最后，在命令行中运行以下命令启动你的 Vue 项目：

npm run serve

步骤 8：查看效果

在浏览器中访问 http://localhost:8080，你应该能看到加载的百度地图。

总结

以上是如何在 Vue 项目中集成百度地图的详细步骤。你可以根据需求进一步扩展功能，比如添加标记、绘制路径等。希望这能帮助到你！

avatar
文章
阅读
粉丝