Vue3+nuxt+ts项目引入高德地图API实现步骤

看了好多相关的文章都没有完全贴合选用Vue3+nuxt+ts框架的,也不太靠谱,只好自己踩坑实现了

首先去高德开放平台用自己的账号申请一个key,位置如下,申请好后保存好生成的key

我们使用@vuemap/vue-amap,一个高德地图2.0版本的vue3对应封装

官方文档地址:@vuemap/vue-amap

首先进行npm安装:

bash 复制代码
// 安装核心库
npm install @vuemap/vue-amap --save

// 安装loca库
npm install @vuemap/vue-amap-loca --save

// 安装扩展库
npm install @vuemap/vue-amap-extra --save

由于我们使用了nuxt框架,组件库内部使用的插件会使用部分特殊的对象,比如process、window。因此在使用时需要根据Nuxt要求处理加载顺序和对象的默认值处理。

在根目录的utils文件夹下创建mapLoadUtil.ts文件,根据自己项目的规范在其他目录创建也可以

typescript 复制代码
// mapLoadUtil.ts
import { initAMapApiLoader } from '@vuemap/vue-amap'

export function initMapApi() {
  initAMapApiLoader({
    key: '8ebf03a11b7b41282f601df648cd0ecc'
  })
}

在nuxt配置文件nuxt.config.ts中添加或修改css引入

typescript 复制代码
// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@vuemap/vue-amap/dist/style.css'],
})

在需要用到地图的页面或封装的组件中引入:

onBeforeMount中加载JSAPI。同时组件需要放入ClientOnly组件中。

html:

html 复制代码
		<!-- mapComponents.vue -->
        <div class="map-container">
          <ClientOnly>
            <ElAmap></ElAmap>
          </ClientOnly>
        </div>

js:

typescript 复制代码
import { initMapApi } from '@/utils/mapLoadUtil'
import { onBeforeMount } from 'vue'
import { ElAmap } from '@vuemap/vue-amap'

onBeforeMount(() => {
  initMapApi()
})

css:

css 复制代码
.map-container{
  height: 500px;
}

展示效果:

OK完成,剩下的就根据项目需求调整地图参数即可,具体参考高德地图JSAPI 2.0

高德地图 JSAPI 2.0

相关推荐
今天头发还在吗2 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
szial2 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
冷冷的菜哥4 小时前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传
知识分享小能手6 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
Kisang.10 小时前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
卧指世阁14 小时前
深入 Comlink 源码细节——如何实现 Worker 的优雅通信
前端·前端框架·源码
过往入尘土14 小时前
深入探索现代前端开发:从基础到架构的完整指南
前端·人工智能·算法·前端框架
Dajiaonew1 天前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
敲敲敲敲暴你脑袋1 天前
用3Dmol.js展示3D分子结构
typescript·webgl·数据可视化
还是大剑师兰特1 天前
TypeScript 面试题及详细答案 100题 (11-20)-- 基础类型与类型操作
typescript·大剑师·typescript教程·typescript面试题