Vue3项目调用百度地图不成功

Question

请问为什么引入百度地图不成功？

index.html引入api

我在public文件夹下的index.html中引入了百度地图的api。为了隐私考虑改动了ak参数，但确实是引入了。

创建Map.vue

然后在components包下创建了Map.vue，代码如下：

<template>
    <div id="map"></div>
</template>
<script>
import { MP } from '../map.js';
export default {
    name: "map",
    mounted() {
        this.initializeMap();
    },
    methods: {
        initializeMap() {
            // 创建地图实例
            var map = new BMap.Map("map");
            // 设置地图中心点和缩放级别
            map.centerAndZoom(new BMap.Point(113.948935, 22.535662), 15);
            // 在地图上添加标记
            var marker = new BMap.Marker(new BMap.Point(113.948935, 22.535662));
            map.addOverlay(marker);
        }
    }
};
</script>
<style>
#map {
    width: 100%;
    height: 400px;
}
</style>

在Test.vue中调用

我在views包下面的Test.vue中调用了该Map.vue，代码如下：

<template>
    <map></map>
</template>

<script>
import Map from '@/components/Map.vue';

export default {
    name: 'test',
    components: {
        Map
    }
}
</script>

在index.js中设置路由

我在index.js中设置了相关路由，相关代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import Index from "../views/Index.vue"
import Contact from '../views/Contact.vue';
import Services from '../views/Services.vue';
import Team from '../views/Team.vue'
import Test from '../views/Test.vue'
const routerHistory = createWebHistory()

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: Index
        },
        {
            path: '/contact',
            component: Contact
        },
        {
            path: '/services',
            component: Services
        },
        {
            path: '/team',
            component: Team
        },
        {
            path: '/test',
            component: Test
        }
    ]
}
)

export default router

测试页面

路径是http://localhost:8080/test，页面是空的，Map并没有渲染。请问这是为什么啊？

Answer 1

引自免费微信小程序：皆我百晓生

在Vue3项目中调用百度地图不成功，根据您提供的信息，可能存在以下几个原因：

1. 百度地图API加载时机问题： 在public/index.html中引入百度地图API后，需要确保在Map组件初始化时，API已经完成加载。您可以尝试在map.js或直接在Map.vue的mounted()生命周期钩子中加入对百度地图API是否加载完成的检查，并在加载完成后执行地图初始化操作。

   // Map.vue
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     name: "map",
     setup() {
       const mapInstance = ref(null);
   
       onMounted(async () => {
         // 确保window.BMap已加载
         if (typeof window !== 'undefined' && window.BMap) {
           initializeMap();
         } else {
           await new Promise(resolve => {
             window.addEventListener('BMap_load', resolve);
           });
           initializeMap();
         }
       });
   
       function initializeMap() {
         var map = new BMap.Map("map");
         // ... 其他地图初始化代码
       }
   
       return {
         // ...
       };
     },
     // ...
   };
   </script>
   

2. DOM元素id匹配问题： 检查Map.vue模板中的div元素id是否正确匹配到JavaScript中创建地图实例的目标容器。

3. API密钥（ak）问题： 虽然您提到已正确引入了API且考虑了隐私，但请再次确认您使用的API密钥（ak）是否有效且与您的应用绑定。

4. 路由配置和页面渲染问题： 根据您给出的路由配置，访问http://localhost:8080/test应该能正确加载Test.vue组件，并显示Map.vue的内容。如果页面为空，请确保浏览器开发者工具中没有报错，并且Vue应用本身没有其他阻止组件渲染的问题。

5. 跨域问题： 尽管一般情况下公共CDN资源不存在跨域问题，但也要注意检查控制台是否有相关的网络请求错误提示，尤其是CORS相关错误。

6. CSS样式影响： 确认#map元素的实际尺寸是否正确，避免由于父级元素或其他CSS样式导致地图无法正常显示。

为解决上述可能的问题，请结合实际情况检查代码并进行相应的调整。同时，确保测试环境下的百度地图API URL正确无误。通常，引入百度地图API的HTML代码如下：

<!-- public/index.html -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY&callback=BMap_load"></script>

其中YOUR_API_KEY应替换为您实际的百度地图API密钥。