高德地图，多边形绘制，编辑，坐标地址是否在多边形内

验证坐标点是否在多边形内

一、内容

• 平台：高德地图
• 功能：可绘制多边形，绘制后可直接编辑，可清除覆盖物，获取多边形坐标点数组，通过地址解析接口获取地址坐标，验证坐标是否在多边形内
• 说明：只是查看了高德api，将多个api组合到了一起做的一个简单demo

二、效果图

三、代码片段

1. 绘制多边形

//通过插件方式引入 AMap.MouseTool 工具
   	map.plugin(["AMap.MouseTool"],function(){
   	   //在地图中添加MouseTool插件
   	    var mouseTool = new AMap.MouseTool(map);

   	    //用鼠标工具画多边形
   	    var drawPolygon = mouseTool.polygon();

   	    //添加事件
   	    AMap.event.addListener( mouseTool,'draw',function(e){
   	    	//清除绘制的多边形
   			mouseTool.close(true);
   	    	//整理坐标点，编辑图形
   	    	setPath(e.obj.getPath());
   	    });

   	});

2. 编辑多边形

var polygon = new AMap.Polygon({
           path: path,
           strokeColor: "#FF33FF", 
           strokeWeight: 6,
           strokeOpacity: 0.2,
           fillOpacity: 0.4,
           fillColor: '#1791fc',
           zIndex: 50,
       })

       map.add(polygon)
       // 缩放地图到合适的视野级别
       map.setFitView([ polygon ])

       polyEditor = new AMap.PolyEditor(map, polygon);

       polyEditor.open();

       polyEditor.on('addnode', function(event) {
           log.info('触发事件：addnode')
       })

       polyEditor.on('adjust', function(event) {
           console.log('你动我了') ;
       })

       polyEditor.on('removenode', function(event) {
           log.info('触发事件：removenode')
       })

       polyEditor.on('end', function(event) {
           // event.target 即为编辑后的多边形对象
       	//多边形的坐标
       	console.log(event.target.getPath())
       })

3. 地址解析

var address  = document.getElementById('address').value;
       geocoder.getLocation(address, function(status, result) {
           if (status === 'complete'&&result.geocodes.length) {
               var lnglat = result.geocodes[0].location
               document.getElementById('lnglat').value = lnglat;
               marker.setPosition(lnglat);
               map.add(marker);
               map.setFitView(marker);
               //点是否在多边形内
   			compute();
           }else{
               log.error('根据地址查询位置失败');
           }
       });

初始没有图形，需要先点击开始编辑之后点击地图开始绘制

完整代码请跳转：完整代码