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

相关推荐
HECHEN****12 小时前
Composition API 与 React Hook 很像,区别是什么?
vue·面试题
知识分享小能手13 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
struggle202514 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
cgsthtm15 小时前
RuoYi.Net后端返回雪花ID前端精度丢失问题
oracle·vue·精度丢失·雪花id·ruoyi.net
玩代码17 小时前
使用 nvm(Node Version Manager) 高效管理Node.js
node.js·vue·nvm
执剑、天涯19 小时前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
Komorebi゛20 小时前
【React】配置别名路径
前端·react.js·前端框架
chéng ௹1 天前
Vue3+Ts+Element Plus 权限菜单控制节点
前端·javascript·vue.js·typescript
FIN66681 天前
昂瑞微:以射频“芯”火 点亮科技强国之路
前端·人工智能·科技·前端框架·智能
bdawn1 天前
Vue3 项目首屏加载性能优化全攻略
性能优化·vue·策略·分包