高德api文档地址：https://lbs.amap.com/demo-center/js-api
1、创建地图
HTML代码：

<template>
	<div>
		<div class="input_list">
        <span style="padding-right: 30px">圆半径(m)：<input v-model="radius"/></span>
        <span style="padding-right: 30px">圆面积(m²)：<input v-model="Math.floor(circleArea)"/> (m²)</span>
        <span >多边形面积(m²)：<input v-model="Math.floor(polygonArea)"/> </span>
      </div>
	<div id="amap-box"></div>
	<div class="mouseTool" style="">
      <el-form size="mini" class="tools_list">
        <el-form-item>
          <el-radio-group v-model="radio" @change="addPhoto" fill="#1aad19" size="small">
            <el-radio label="circle">画圆 </el-radio>
            <el-radio label="polygon">画多边形 </el-radio>
          </el-radio-group>
          <el-button @click="clearAll">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
	</div>
</template>


data（）{
	return{
		mapObj: null,   //定义全局地图
		mouseTool:null,//鼠标绘图工具
        radio:'', //图案类型
        circle:null,//圆形
        circlecenter:[],//圆心坐标
        circleEditor:null, //圆形编辑器
        radius:0,//半径
        circleArea:'',//圆形面积

        polygon:null,//多边形
        polygonPath:[],//获取多边形点坐标
        polygonEditor:null,//多边形编辑工具
        polygonArea:'',//多边形面积
	}
}，
mounted(){
	this.initMap()
},
methods:{
	initMap(){
		let map = new AMap.Map('amap-box', {
	        resizeEnable: true, //是否监控地图容器尺寸变化
	        zoom:11, //初始化地图层级
	        center: [116.397428, 39.90923] //初始化地图中心点
	    });
	    
		//左侧鱼骨图显示
        let toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
        
         //右上角地图切换效果显示
        let maptype = new AMap.MapType({
          defaultType: 0, //使用2D地图
          showRoad:true  //叠加路网图层
        });
        map.addControl(maptype);
        
        self.mapObj = map;   
        //生成鼠标绘图工具
		self.mouseTool = new AMap.MouseTool(self.mapObj);
		//绘制 方法
		self.mouseTool.on('draw',function(e){
          self.mapObj.setDefaultCursor("crosshair");
          if(self.radio=='circle'){
            //计算圆心坐标
             let x = e.obj.getPath()[8].lng ; //圆心的x轴坐标
             let y = e.obj.getPath()[0].lat; //圆心的y轴坐标
             self.circlecenter=[x,y]; //圆心坐标
            //计算圆的半径
            let m1 = new AMap.Marker({
              position: new AMap.LngLat(e.obj.getPath()[0].lng,e.obj.getPath()[0].lat)
            });
            let m2 = new AMap.Marker({
              position:new AMap.LngLat(e.obj.getPath()[17].lng,e.obj.getPath()[17].lat)
            });
            let p1 = m1.getPosition();
            let p2 = m2.getPosition();
            let distance = Math.round(p1.distance(p2));
            self.radius=distance;
            //圆的面积
            self.circleArea = 3.14*(self.radius*self.radius)
             self.drawcircle(); //添加圆形到地图
             self.mouseTool.close(true) //去掉蓝色底层

          }else if(self.radio=='polygon'){
            self.polygonPath=e.obj.getPath();
            self.drawpolygon();
            self.mouseTool.close(true) //去掉蓝色底层
          }
        });
	},
	 addPhoto(){
        let self = this;
        self.draw(self.radio);
      },
      //判断需要画的图形类型
      draw(type) {
        let self = this;
        self.mapObj.setDefaultCursor("crosshair");
        switch (type) {
          case 'polygon':{
            self.mapObj.clearMap(); //清除地图
            self.radius='';
            self.circleArea="";
            self.mouseTool.polygon({});
            break;
          }
          case 'circle':{
            self.mapObj.clearMap();
            self.polygonArea='';
            self.mouseTool.circle({});
            break;
          }
        }
      },
      //添加圆并且编辑
      drawcircle(){
        let self = this;
        self.circle = new AMap.Circle({   //圆形编辑器的样式
          map: self.mapObj,
          center:self.circlecenter,
          radius:self.radius,
          strokeColor: "#F33",
          strokeOpacity: 1,
          strokeWeight: 1,
          fillColor: "#fff",
          fillOpacity: 0.5
        });
        self.circle.setMap(self.mapObj)
        // 缩放地图到合适的视野级别
        self.mapObj.setFitView([ self.circle ]);
        self.circleEditor = new AMap.CircleEditor(self.mapObj,self.circle);   //创建多边形编辑器对象
        self.circleEditor.open();    //打开多边形编辑器
        self.mapObj.setDefaultCursor("crosshair");
        self.circleEditor.on('adjust', function(event) {
          self.radius=event.radius; //获取圆形的半径
          self.circleArea = 3.14*(self.radius*self.radius) //面积
        });
        self.circleEditor.on('move', function(event) {
          console.log(event)//获取圆心坐标
        });

      },
      //添加多边形到地图
      drawpolygon(){
        let self = this;
        self.polygon = new AMap.Polygon({
          path: self.polygonPath,
          fillColor: '#fff', // 多边形填充颜色
          borderWeight: 1, // 线条宽度，默认为 1
          strokeWeight: 1,
          fillOpacity: 0.5,
          strokeColor: 'red', // 线条颜色
        });
        self.mapObj.add(self.polygon); //多边形添加到地图层里
        self.mapObj.setFitView(); //显示多边形图案

        self.polygonEditor = new AMap.PolyEditor(self.mapObj,self.polygon);   //创建多边形编辑器对象
        self.polygonEditor.open();    //打开多边形编辑器
        self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);//初始化计算面积
        self.polygonEditor.on('adjust', function(event) {  //编辑多边形时候，随时监听坐标点并计算面积
          self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);
          //console.log(self.polygonPath) 获取多边形的点
        });

      },
      //清除所有图形
      clearAll(){
        let self = this;
        self.radio='';
        self.radius='';
        self.circleArea="";
        self.polygonArea='';
        self.mapObj.clearMap();
        self.mapObj.setDefaultCursor();
      },
}

这里一定要注意“amap-box”和id值一致
在初始化的方法中，配置好地图控件。修改配置文件
在这里插入图片描述
[地图的链接地址&（你的秘钥）+所使用的控件，每次更新完配置文件，要npm run dev, 否则会报错]

在画圆的时候需要注意的事：
1、需要计算圆心坐标和半径：
e.obj.getPath()；===》返回了36个点的坐标；可以自己画坐标图就能明白，
e.obj.getPath()[0];第一个点坐标，
e.obj.getPath()[17];和第一个点对应的点坐标；
e.obj.getPath()[0] 和e.obj.getPath()[17] 两点距离，是直径；
2、再利用两点间距离方法：
计算圆的半径

JS 代码
//计算圆的半径
        let m1 = new AMap.Marker({
           position: new AMap.LngLat(e.obj.getPath()[0].lng,e.obj.getPath()[0].lat)
         });
         let m2 = new AMap.Marker({
           position:new AMap.LngLat(e.obj.getPath()[17].lng,e.obj.getPath()[17].lat)
         });
         let p1 = m1.getPosition();
         let p2 = m2.getPosition();
         let distance = Math.round(p1.distance(p2));
         self.radius=distance;

3、圆的面积

//圆的面积
            self.circleArea = 3.14*(self.radius*self.radius)
             self.drawcircle(); //添加圆形到地图
             self.mouseTool.close(true) //去掉蓝色底层

4、编辑圆的时候，实时获取半径和圆心

		//移动半径大小时候调用
		self.circleEditor.on('adjust', function(event) {
          self.radius=event.radius; //获取圆形的半径
          self.circleArea = 3.14*(self.radius*self.radius) //面积
        });
        //移动圆心时候调用
        self.circleEditor.on('move', function(event) {
          console.log(event)//获取圆心坐标
        });

在画多边形的时候需要注意的事：
1、e.obj.getPath(); ==》直接返回多边形的各个点坐标；
2、计算多变形的面积 ；

let polygonPath=e.obj.getPath()；//获取路径
let polygonArea = AMap.GeometryUtil.ringArea(polygonPath); //计算面积

3、编辑多边形时候监听方法（获取面积）

       self.polygonEditor.on('adjust', function(event) {  //编辑多边形时候，随时监听坐标点并计算面积
          self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);
          //console.log(self.polygonPath) 获取多边形的点
        });

其他参考网站：
转：博客文档：https://www.cnblogs.com/milkmap/tag/高德/

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue