2024年前端最新vue3怎么引入高德地图_vue3引入高德地图(1)，学习前端开发培训

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

import resolveExternalsPlugin from ‘vite-plugin-resolve-externals’

export default defineConfig({
plugins: [
resolveExternalsPlugin({
Amap: Amp
})
]
})

方法三:如果你想直接使用也可以  
 直接打印window，先看看window对象有没有挂载AMap,如果有,直接调用

console.log(window)
const AMap = window.AMap
console.log(AMap)

4.重新运行项目


5.在需要的vue文件中调用高德地图

import AMap from ‘AMap’
import { onMounted, reactive, toRefs } from ‘vue’;

export default {
setup() {
const state = reactive({
});
//高德地图引入
const gaode = () =>{
// 创建地图实例
let map = new AMap.Map(“map”, {
center: [114.298572, 30.584355],
zoom: 11.2,
// showLabel: false, //不显示地图文字标记
});
map.setCity(“武汉市”); //初始化显示的区域
var styleName = “amap://styles/” + “blue”;//底部颜色
map.setMapStyle(styleName);//极夜蓝
new AMap.Marker({
map: state.mapObj,
position: new AMap.LngLat(“226”, “335”), //此处根据页面数据可以直接传入经纬度进行描点
});
}
onMounted(() => {
gaode()
});
return {
…toRefs(state),
};
},
};

![在这里插入图片描述](https://img-blog.csdnimg.cn/8bfc46232023476da2500316015f3772.png#pic_center)



### 最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**