1、代码块

<template><div ref="mapContainer" style="width: 800vh; height: 100vh; align-items: center; justify-content: center"></div>
</template><script>
export default {mounted() {this.initMap();},methods: {initMap() {// 引入高德地图的 JavaScript APIconst script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=bacb50ec59a6cb4528f0f2ad6ecc4c54';script.onload = () => {// 初始化地图const map = new window.AMap.Map(this.$refs.mapContainer, {zoom: 14,center: [121.434765, 31.256735],});// 添加点标记this.addMarker(map);};script.onerror = () => {console.error('加载高德地图API失败');};document.head.appendChild(script);},addMarker(map) {// 添加一个点标记new window.AMap.Marker({position: [121.434765, 31.256735],map: map,});},},
};
</script><style scoped></style>

2、加载出来的效果图