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

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

在这里插入图片描述

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

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

首先进行npm安装

// 安装核心npm install @vuemap/vue-amap --save

// 安装locanpm install @vuemap/vue-amap-loca --save

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

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

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

在这里插入图片描述

// mapLoadUtil.ts
import { initAMapApiLoader } from '@vuemap/vue-amap'

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

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

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

需要用到地图的页面封装组件引入

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

html

		<!-- mapComponents.vue --&gt;
        <div class="map-container"&gt;
          <ClientOnly&gt;
            <ElAmap&gt;</ElAmap&gt;
          </ClientOnly&gt;
        </div>

js

import { initMapApi } from '@/utils/mapLoadUtil'
import { onBeforeMount } from 'vue'
import { ElAmap } from '@vuemap/vue-amap'

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

css

.map-container{
  height: 500px;
}

展示效果

在这里插入图片描述
OK完成,剩下的就根据项目需求调整地图参数即可,具体参考高德地图JSAPI 2.0

高德地图 JSAPI 2.0

原文地址:https://blog.csdn.net/vvv3171071/article/details/134748666

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44318.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注