1,安装vuemap/vue-amap和ant-design-vue
2,引入lazyAMapApiLoaderInstance和样式
import '@vuemap/vue-amap/dist/style.css'
import {message} from 'ant-design-vue'
import { lazyAMapApiLoaderInstance } from '@vuemap/vue-amap';
3,调用lazyAMapApiLoaderInstance即可
lazyAMapApiLoaderInstance.then(() => {
global.map = new AMap.Map('Amap', {//该处global只是配置的全局变量,'Amap'是地图挂载div的id
center: new AMap.LngLat(116.3939666748047,39.91763621372857),//中心点
zoom:13,//地图缩放级别
viewMode:'3D',//3D地图
});
global.map.on('click',mapClick)//给地图绑定点击事件
//构造点标记
var marker = new AMap.Marker({
position: new AMap.LngLat(116.3939666748047,39.91763621372857), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京'
});
// 构造矢量圆形
var circle = new AMap.Circle({
center: new AMap.LngLat(116.3939666748047,39.91763621372857), // 圆心位置
radius: '3000', //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0 //填充透明度
});
global.map.add(marker);//将点挂载到地图上
global.map.add(circle);//将圆挂载到地图上
circle.on('click',cirClick)//给圆绑定点击事件
});
初始化后页面展示
点击圆 获取当前点击到经纬度坐标</