注册百度地图开发者平台

https://lbsyun.baidu.com

引入百度地图的api文件

根目录下的index.html文件中

  1. <head>
  2.    <meta charset="UTF-8" />
  3.    <link rel="icon" href="/favicon.ico" />
  4.    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.       //1.0版本
  6.    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></script>
  7.    <title>Vite App</title>
  8. </head>
  1. //版本2.0  3.0用以下方法
  2. <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥">

创建地图组件

MapBox.vue

  1. <template>
  2.   <div id="container"></div> 
  3. </template>
  5. <script setup>
  6. import {onMounted} from 'vue';
  8. onMounted(()=>{
  9.       //1.0使用以下对象
  10.     var map = new BMapGL.Map("container");
  11.     map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  13.     //2.0,3.0使用以下对象
  14.         var map = new BMap.Map("container");
  15.         // 创建地图实例  
  16.         var point = new BMap.Point(116.404, 39.915);
  17.         // 创建点坐标  
  18.         map.centerAndZoom(point, 15);
  19.         // 初始化地图，设置中心点坐标和地图级别  
  20. })
  21. </script>
  23. <style>
  24. #container{
  25.     width: 100%;
  26.     height: 721.6px;
  27. }
  28. </style>

注意版本，1.0是BMapGL对象，2.0和3.0是BMap对象