先看效果图
在public文件夹的index.html中引入高德js
<script src="https://webapi.amap.com/maps?v=1.4.8&key="你自己申请的key"&plugin=ElasticMarker,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<template>
<div id="mapGaode" style="width: 100%; height: 100vh"></div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import AMap from "AMap";
export default {
setup() {
//高德地图引入
const gaode = () => {
// 创建地图实例
let map = new AMap.Map("mapGaode", {
center: [113.672361,34.7586],
zoom: 11.2,
});
//底部颜色
var styleName = "amap://styles/" + "black";
//黑色
map.setMapStyle(styleName);
};
onMounted(() => {
gaode();
});
return {
};
},
};
</script>
<style scoped></style>
重点来了在这里
一定要在vue.config.js中加上不然或报错找不到Map
configureWebpack: config => {
config.externals = {
AMap: 'AMap'
}
},