### 使用版本

vue3 elementplus3 vue-amap2.1.8

### 问题描述

第一次使用，由于我使用vue-pure-admin的开源框架，框架只能使用pnpm安装，所以我使用npm安装后通过pnmp添加了最新的版本，看来教程因为使用elementplus，所以自动加载需安装对应的库，配置好后，会跟我原框架的名称冲突，所以又卸载了对应的排除库，猜想应该根源是我不清楚怎样使用vue-amap手动加载，如果您方便是否可以告知如何解决此问题

1、main.ts的配置：

import "@vuemap/vue-amap/dist/style.css";

import VueAMap,{initAMapApiLoader} from "@vuemap/vue-amap";

initAMapApiLoader({

key: "xxxx",

securityJsCode: "xxxx"

});

app.use(VueMap)

这个加载应该是做了的，因为其他的引用是没有问题的

然后在项目的ts文件按例子搬过来的如下

export function useRole() {

const zoom = ref(12);

const center = ref([121.59996, 31.197646]);

let map = null;

const init = (e :any) => {

const marker = new AMap.Marker({

position: [121.59996, 31.197646]

});

e.add(marker);

map = e;

console.log('map init: ', map)

}

const add = () => {

const marker = new AMap.Marker({

position: [121.59996, 31.177646]

});

map.add(marker);

}

return {

zoom,

center,

init,

add

};

}

调用的Vue如下：

<script setup lang="ts">

import {useRole} from "./hook";

import {ElAmap} from "@vuemap/vue-amap";

const {

zoom,

center,

init

} = useRole();

defineOptions({

name: "Welcome"

});

</script>

<template>

<div class="map-page-container">

<el-amap

vid = "amapContainer"

clase = "amapClass"

:center="center"

:zoom="zoom"

@init="init"

/>

</div>

</template>

跟踪发现map = e;存在$C未定义，同时看不到地图

跟踪发现map = e;存在"$C"未定义，同时看不到地图


(https://foruda.gitee.com/images/1729180054253258181/a6ad0e66_7368857.png "屏幕截图")