2024年最全vue3怎么引入高德地图_vue3引入高德地图，2024年前端阿里&腾讯&百度&字节校招面试汇总

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

configureWebpack: {
externals: {
AMap: ‘AMap’
}
}
}

方法二：如果是vite.config.js 里面,需要安装插件

npm i -D vite-plugin-resolve-externals

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”), //此处根据页面数据可以直接传入经纬度进行描点

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

42)]

[外链图片转存中…(img-SIrsyw7H-1715657460542)]

[外链图片转存中…(img-X8h6VRuh-1715657460543)]