web端引用高德地图

web端引用高德地图，vue3引用高德地图

• **前置需求：**在高德开放平台官网进行注册后，点击"控制台"进入此页面。依次完成①②③步即可完成地图Key的注册，主义在添加key时key的类型要选择正确，网页端要选择web端，根据需要自行选择即可。

  

1. 创建地图div

   <div ref="map" class="map"></div>
   

2. 创建变量和初始化地图的方法

   // 使用 ref 来引用地图容器
   const map = ref(null);
   // 高德地图加载完成后调用的回调函数
   function initMap() {
   	// 创建地图实例
     const mapInstance = new AMap.Map(map.value, {
       zoom: 10,// 设置初始缩放级别
       center: [116.481025, 39.970464] // 北京的中心坐标
     });
   
     // 可以在这里添加更多的地图操作，比如标记点等
   }
   

3. 在onMounted钩子中执行

   onMounted(() => {
     // 检查 AMap 是否已经加载
     if (typeof AMap === 'undefined') {
       // 如果 AMap 还未加载，则动态加载
       const script = document.createElement('script');
       script.src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_WEB_API_KEY&plugin=AMap.Geolocation';
       // 设置 onload 回调函数，当脚本加载完成后初始化地图
       script.onload = () => {
         initMap();
       };
       // 将脚本添加到文档头部
       document.head.appendChild(script);
     } else {
       // 如果 AMap 已经加载，则直接初始化
       initMap();
     }
   })
   

4. 注意事项：

   • API Key：请确保将 YOUR_WEB_API_KEY 替换为你的实际 Web 端 API Key。
   • 插件加载：如果你不需要 AMap.Geolocation 插件，可以去掉 &plugin=AMap.Geolocation 部分。
   • 错误处理：考虑添加错误处理逻辑，以确保在加载过程中出现问题时能够捕获并处理错误。
   • 在组件挂载后检查 AMap 是否已经定义。
   • 如果 AMap 尚未定义，则创建一个 <script> 标签并加载高德地图的 JS 文件。
   • 设置 onload 回调函数，在脚本加载完成后调用 initMap 函数。
   • 如果 AMap 已经定义，则直接调用 initMap 函数。

完成代码

<template>
  <div>
 	<div ref="map" class="map"></div>
  </div>
</template>

<script setup name="Index">
import {onMounted, ref,reactive} from 'vue';


// 使用 ref 来引用地图容器
const map = ref(null);
// 高德地图加载完成后调用的回调函数
function initMap() {
	// 创建地图实例
  const mapInstance = new AMap.Map(map.value, {
    zoom: 10,// 设置初始缩放级别
    center: [116.481025, 39.970464] // 北京的中心坐标
  });

  // 可以在这里添加更多的地图操作，比如标记点等
}


onMounted(() => {
  // 检查 AMap 是否已经加载
  if (typeof AMap === 'undefined') {
    // 如果 AMap 还未加载，则动态加载
    const script = document.createElement('script');
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=你申请的Key&plugin=AMap.Geolocation';
    // 设置 onload 回调函数，当脚本加载完成后初始化地图
    script.onload = () => {
      initMap();
    };
    // 将脚本添加到文档头部
    document.head.appendChild(script);
  } else {
    // 如果 AMap 已经加载，则直接初始化
    initMap();
  }
})
</script>

<style scoped lang="scss">
.map{
    height: 60vh;
    width: 100%;
    border: 1px solid #000;
    overflow: scroll;
  }
}

</style>


map{
    height: 60vh;
    width: 100%;
    border: 1px solid #000;
    overflow: scroll;
  }
}

</style>