js基于谷歌地图API绘制可编辑圆形与多边形

来源：互联网发布：淘宝直播怎么开编辑：程序博客网时间：2024/05/18 01:42

之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图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实现绘制可编辑圆形和多变形的功能就完成了。

分类: Web开发

阅读全文

0 0