vue3引入腾讯地图报错

Question

vue3引入腾讯地图显示Uncaught (in promise) ReferenceError: map is not defined，该如何解决？

Answer 1

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

在 Vue3 项目中引入腾讯地图并遇到 Uncaught (in promise) ReferenceError: map is not defined 错误，通常意味着你可能在未正确初始化地图实例或尝试访问尚未创建的 map 对象。以下是一份详细的解决方案：

1. 安装腾讯地图 Web API SDK： 首先确保已在全局或组件内通过 CDN 引入了腾讯地图 JS 文件。例如，在你的 public/index.html 中添加以下代码：

   <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>
   

   其中 YOUR_API_KEY 需要替换为你的腾讯地图 Web服务API密钥。

2. 在 Vue 组件中使用腾讯地图： 在你的 Vue 组件中，你可以按照以下步骤创建地图实例：

   <template>
     <div ref="container" style="width: 100%; height: 400px;"></div>
   </template>
   
   <script setup>
   import { ref, onMounted } from 'vue';
   
   const container = ref(null);
   
   // 腾讯地图API加载完成后执行
   window.onload = function () {
     // 确保在此处调用QMap.create
     new window.qq.maps.Map(container.value, {
       center: new window.qq.maps.LatLng(39.916527, 116.397128), // 设置地图中心点坐标
       zoom: 10, // 设置地图缩放级别
     });
   };
   
   // 或者在Vue生命周期钩子中创建地图实例（推荐）
   onMounted(() => {
     if (window.qq && window.qq.maps) {
       new window.qq.maps.Map(container.value, {
         center: new window.qq.maps.LatLng(39.916527, 116.397128),
         zoom: 10,
       });
     } else {
       console.error('腾讯地图API未加载完成');
     }
   });
   </script>
   

   上述代码首先定义了一个 ref 容器，然后在 onMounted 生命周期钩子中初始化地图实例。这样可以确保当 DOM 元素挂载完成后才去创建地图，避免因 DOM 未准备好而导致的 map is not defined 错误。

3. 确保API已成功加载： 如果你在异步加载地图API后立即尝试创建地图，请确保在API加载完成后才进行实例化操作，否则可能会找不到 window.qq.maps.Map。

以上就是解决 Vue3 中引入腾讯地图报错的详细方案。请检查并根据实际情况调整代码。