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 项目中成功集成高德地图。你可以根据需求扩展地图功能,例如添加标记、绘制路径等。

相关推荐
北城笑笑8 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia8 小时前
如何找回Harbor密码
前端
码码哈哈0.08 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩8 小时前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆8 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了8 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆8 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
带娃的IT创业者8 小时前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
weixin_431600448 小时前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
前端·javascript·vue.js
OEC小胖胖8 小时前
App Router vs. Pages Router:我应该如何选择?
开发语言·前端·前端框架·web·next.js