js基于谷歌地图API绘制可编辑圆形与多边形
之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图API封装了个html页面，通过调用js绘制多边形并返回各点的经纬度坐标；当然首先你要保证你的电脑可以打开谷歌地图。。。
新建一个html页面
<!DOCTYPE html> <html> <head> <title>googel Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=替换成你申请的KEY值&&libraries=places&&libraries=drawing"> </script> <script type="text/javascript" src="../GMAPS/api/Airfunc.js"></script> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body onload="initMap('terrain')"> <div id="map"></div> </body> </html>
新建js文件，我这里命名为Airfunc，这里主要的问题是对绘制图形的完成和编辑添加事件监听
var map; var drawingManager; var shape; var Linetype; var Linecolor; var LineWeight; var Aircolor; var Airtmd; var AirCircle; var AirPolygon; var AirShape = []; var oldAirShape = []; function initMap(mapType) { var myLatLng = { lat: 39.7656768, lng: 115.8299185 }; map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng, scaleControl: true, //地图比例控件 zoomControl: true, //缩放控件 disableDefaultUI: false,//默认UI mapTypeId: mapType }); } //设置空域类型 function SetAirType(linetype,linecolor,lineWeight,aircolor,airtmd) { Linetype = linetype; Linecolor = linecolor; //线色 LineWeight = lineWeight;//线宽 Aircolor = aircolor;//空域颜色 Airtmd = airtmd;//空域透明度 } //画圆形区域 function drawCircleMap() { if (drawingManager != null) { drawingManager.setMap(null); } drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.CIRCLE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['circle'] }, markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }, circleOptions: { strokeColor: Linecolor, fillColor: Aircolor, fillOpacity: Airtmd, strokeWeight: LineWeight, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); drawingManager.addListener('circlecomplete',shapecomplete);//添加完成事件监听 drawingManager.addListener('overlaycomplete',overlaycomplete);//添加编辑事件监听 } function shapecomplete(e) { drawingManager.setDrawingMode(null); if (shape != null) { shape.setMap(null); } //清除上一个围栏叠加层 shape = e; shape.setMap(map); if (e.type == google.maps.drawing.OverlayType.CIRCLE) { var cenbl = e.getCenter(); var iradius = e.getRadius(); window.external.GetShapeLonLat(cenbl.lat()+","+cenbl.lng()+","+iradius); } else if (e.type == google.maps.drawing.OverlayType.POLYGON) { var array = e.getPath().getArray(); ReturnLonLat(array); } } //画多边形区域 function drawPolygonMap() { if (drawingManager != null) { drawingManager.setMap(null); } drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['polygon'] }, markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }, polygonOptions: { strokeColor: Linecolor, fillColor: Aircolor, fillOpacity: Airtmd, strokeWeight: LineWeight, clickable: false, editable: true, strokeStyle:'dashed', zIndex: 1 } }); drawingManager.setMap(map); drawingManager.addListener('polygoncomplete', shapecomplete);//添加完成事件事件监听 drawingManager.addListener('overlaycomplete', overlaycomplete);//添加编辑事件监听 } function overlaycomplete(e) { if (e.type == google.maps.drawing.OverlayType.CIRCLE) { // Switch back to non-drawing mode after drawing a shape. // Add an event listener that selects the newly-drawn shape when the user // mouses down on it. var newShape = e.overlay; newShape.type = e.type; google.maps.event.addListener(newShape, 'radius_changed', function () { var cenbl = newShape.getCenter(); var iradius = newShape.getRadius(); window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius); }); google.maps.event.addListener(newShape, 'center_changed', function () { var cenbl = newShape.getCenter(); var iradius = newShape.getRadius(); window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius); }); google.maps.event.addListener(newShape, 'click', function () { var cenbl = newShape.getCenter(); var iradius = newShape.getRadius(); window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius); }); } else if(e.type == google.maps.drawing.OverlayType.POLYGON) { var array; var newShape = e.overlay; newShape.type = e.type; var array = newShape.getPath().getArray(); google.maps.event.addListener(newShape, 'click', function () { }); google.maps.event.addListener(newShape.getPath(), 'insert_at', function () { array = newShape.getPath().getArray(); ReturnLonLat(array); }); google.maps.event.addListener(newShape.getPath(), 'set_at', function () { array = newShape.getPath().getArray(); ReturnLonLat(array); }); google.maps.event.addListener(newShape.getPath(), 'remove_at', function () { ReturnLonLat.setMap(map); }); } } function ReturnLonLat(arr) { var strinfo = ""; for (var i = 0; i < arr.length; i++) { strinfo += arr[i].lat() strinfo += ","; strinfo += arr[i].lng(); strinfo += "|"; }; window.external.GetShapeLonLat(strinfo); }
一个简单的加载谷歌地图，并调用封装js实现绘制可编辑圆形和多变形的功能就完成了。
