web端引用高德地图

间行字里.

已于 2024-10-21 21:30:26 修改

阅读量1.6k

点赞数 24

文章标签：前端 vue

于 2024-10-21 21:24:29 首次发布

本文链接：https://blog.csdn.net/weixin_52992693/article/details/143133751

版权

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

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

创建地图div
```
<div ref="map" class="map"></div>
```

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

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

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

在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();
  }
})

注意事项：
- 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>