1.首先我们需要进入到高德地图的官方网站申请一个key和密钥 ，创建一个项目--首页 | 高德控制台
编辑
2.安装高德地图的包 --npm i @amap/amap-jsapi-loader --save
3.新建一个放地图的vue组件
编辑
4.具体代码如图
编辑
ps：附上代码片段
<template>
<div id="map-container">
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖
// import { on } from "events";
window._AMapSecurityConfig = {
securityJsCode:"3668f3fbb7ef0add9687dbc9c173****", // 安全密钥
};
export default {
data() {
return {
map: null,
mouseTool : null,
overlays : [],
auto : null,
placeSearch : null,
};
},
mounted(){
this.initMap()
},
methods: {
// 初始化地图1
// initMap() {
// AMapLoader.load({
// key:"4c1333a4be7bf72c5b683df714e3****", //key值是key值 和安全密钥不同
// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
// plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation','AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
// })
// .then((AMap) => {
// // console.log(AMap)
// // 初始化地图
// this.map = new AMap.Map("map-container", {
// viewMode: "2D", // 是否为3D地图模式
// zoom: 18, // 初始化地图级别
// center: [113.129972,22.570318], //中心点坐标
// // layers: [//使用多个图层
// // new AMap.TileLayer.Satellite(),
// // new AMap.TileLayer.RoadNet()
// // ],
// resizeEnable: true,
// })
// this.map.addControl(new AMap.Scale())
// this.map.addControl(new AMap.ToolBar())
// this.map.addControl(new AMap.HawkEye())
// this.map.addControl(new AMap.MapType())
// this.map.addControl(new AMap.Geolocation())
// // this.mouseTool = new AMap.MouseTool(this.maps)
// // this.mouseTool.on("draw", e => {
// // console.log('eeee-----',e)
// // this.drawObj = e.obj
// // var area = Math.round(AMap.GeometryUtil.ringArea(e.obj.getPath()))
// // var distance = Math.round(AMap.GeometryUtil.distanceOfLine(e.obj.getPath()))
// // this.$message.success("绘制完成")
// // console.log(e.obj.getPath().map(({ lng, lat }) => [lng, lat]))
// // })
// })
// .catch((e) => {
// console.log(e);
// });
// },
// 初始化地图2
initMap() {
AMapLoader.load({
"key": "4c1333a4be7bf72c5b683df714e3a01d", // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.MouseTool","AMap.MapType","AMap.HawkEye"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap)=>{
this.map = new AMap.Map('map-container',{
viewMode : "2D", // 是否为3D地图模式
zoom : 13, // 初始化地图级别
center : [113.129972,22.570318], //中心点坐标 郑州
resizeEnable: true
});
// 添加左下角的比例尺
this.map.addControl(new AMap.Scale());
let toolBar = new AMap.ToolBar({
position: {
bottom: '210px',
right: '35px'
}
});
let controlBar = new AMap.ControlBar({
position: {
bottom: '280px',
right: '10px',
},
});
// 鼠标点击获取经纬度
this.map.on('click', function(e) {
console.log('e---',e)
console.log('e.lnglat---',e.lnglat)
console.log("经度",e.lnglat.getLng())
console.log("纬度",e.lnglat.getLat())
});
// 地图上绘制点位
this.mouseTool = new AMap.MouseTool(this.map);
// 监听draw事件可获取画好的覆盖物
this.mouseTool.on('draw',function(e){
console.log('获取画好的覆盖物',e)
this.overlays.push(e.obj);
}.bind(this))
this.map.addControl(toolBar); // 添加右下角的放大缩小
this.map.addControl(controlBar); // 方向盘
this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图 和路况
this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜
}).catch(e => {
console.log(e);
});
},
// 具体画图代码
draw(type){
switch(type){
case 'marker':{
this.mouseTool.marker({
//同Marker的Option设置
});
break;
}
case 'polyline':{
this.mouseTool.polyline({
strokeColor:'#80d8ff'
//同Polyline的Option设置
});
break;
}
case 'polygon':{
this.mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'rectangle':{
this.mouseTool.rectangle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'circle':{
this.mouseTool.circle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Circle的Option设置
});
break;
}
}
}
}
}
</script>
<style scoped>
#map-container{
overflow: hidden;
width: 500px;
height: 500px;
margin: 0;
}
</style>
4.1需要给一个带宽高的div盒子 放置地图
4.2按需引入依赖
4.3安全密钥
4.4初始化地图 --如图配置项 （key：申请的key；version：版本；plugins：需要用到的插件列表）
4.5 在then里面写固定的配置项（viewmode：选择是2d还是3d；zoom：地图的层级，越高显示越近；center：第一次进入页面经纬度显示的地点）
到此简单的地图就完成啦。
