1.安装高德地图组件库
npm i @amap/amap-jsapi-loader -S
2.新建地图文件 map.vue
<template>
<!-- 地图盒子 -->
<div id="container"></div>
</template>
<script>
// 引入组件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
// window._AMapSecurityConfig = {
// securityJsCode: "····",
// };
export default {
data() {
return {
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "key", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.Scale",
"AMap.ToolBar",
"AMap.AutoComplete",
"AMap.PlaceSearch",
"AMap.ControlBar",
"AMap.MouseTool",
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
// 点击某个城市出现该城市的经纬度
this.map.on("click", function (e) {
console.log("经度", e.lnglat.getLng());
console.log("纬度", e.lnglat.getLat());
});
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100vw;
height: 100vh;
}
</style>
<style lang="scss">
.amap-logo {
display: none !important;
}
.amap-copyright {
display: none !important;
}
</style>