Vue 3 中如何对接高德地图

1. 准备工作

1.1. 获取高德地图 API Key

首先,你需要在高德开放平台注册并获取一个 API Key。访问 高德开放平台 注册并申请。

1.2. 安装依赖

在 Vue 3 项目中使用高德地图,可以通过以下步骤安装依赖:

复制代码
npm install @types/amap-js-api --save-dev

这是为了给高德地图 API 提供 TypeScript 的类型定义。

2. 创建 Vue 组件

2.1. 创建 Map.vue 组件

src/components 目录下创建 Map.vue 文件,这是我们将要实现地图功能的组件。

复制代码
<template>
  <div id="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

解释:

<template> 标签内定义了组件的 HTML 结构。

id="mapContainer" 是地图容器的 ID,地图将渲染到这个容器中。

style 属性用于设置地图容器的宽高。

2.2. 添加地图初始化脚本

Map.vue 文件中,添加 script 部分:

复制代码
<script setup>
import { onMounted } from 'vue';

// 高德地图 API Key
const amapKey = '你的高德地图 API Key';

// 初始化地图
const initMap = () => {
  // 确保高德地图 API 已经加载
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${amapKey}`;
  script.async = true;
  script.onload = () => {
    // 高德地图 API 加载完成后的回调
    const map = new AMap.Map('mapContainer', {
      zoom: 10, // 设置地图的缩放级别
      center: [116.397428, 39.90923] // 设置地图的中心坐标
    });
  };
  document.head.appendChild(script);
};

// Vue 3 生命周期钩子,组件挂载后执行
onMounted(() => {
  initMap();
});
</script>

按照下面步骤获取高德地图的API key

解释:

import { onMounted } from 'vue'; 引入 Vue 3 的 onMounted 钩子,用于在组件挂载后执行代码。

const amapKey = '你的高德地图 API Key'; 替换为你在高德开放平台注册后获得的 API Key。

const script = document.createElement('script'); 创建一个新的 <script> 标签,用于引入高德地图的 API。

script.src 设置地图 API 的 URL,包括版本号和 API Key。

script.onload 指定 API 加载完成后的回调函数,用于初始化地图。

const map = new AMap.Map('mapContainer', {...}); 创建地图实例并配置中心点和缩放级别。

onMounted(() => { initMap(); }); 确保 initMap 在组件挂载后调用,初始化地图。

2.3. 样式设置

你可以在 Map.vue 文件内的 <style> 标签中添加地图样式,例如:

复制代码
<style scoped>
#mapContainer {
  width: 100%;
  height: 500px;
}
</style>

3. 使用组件

src/App.vue 或其他需要使用地图的组件中,导入并使用 Map.vue 组件:

复制代码
<template>
  <div id="app">
    <Map />
  </div>
</template>

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

解释:

import Map from './components/Map.vue'; 引入 Map.vue 组件。

<Map /> 使用 Map 组件并在页面上渲染地图。

4. 高级功能

高德地图提供了丰富的 API 和功能,例如标记、路线规划等。你可以在 initMap 函数中添加更多功能。

例如,添加一个标记:

复制代码
const initMap = () => {
  // 确保高德地图 API 已经加载
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${amapKey}`;
  script.async = true;
  script.onload = () => {
    // 高德地图 API 加载完成后的回调
    const map = new AMap.Map('mapContainer', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });

    // 添加标记
    new AMap.Marker({
      position: [116.397428, 39.90923],
      map: map
    });
  };
  document.head.appendChild(script);
};

解释:

new AMap.Marker({...}) 创建一个新的标记并将其添加到地图上。

总结

通过上述步骤,你可以在 Vue 3 项目中成功集成高德地图。你可以根据需求扩展地图功能,例如添加标记、绘制路径等。

相关推荐
好_快29 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快30 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快32 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel44 分钟前
webpack 核心编译器 十四 节
前端
excel1 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端