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

最新推荐文章于 2022-08-24 10:44:27 发布

dianyuzhi7625

最新推荐文章于 2022-08-24 10:44:27 发布

阅读量495

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/dafanjoy/p/7428747.html

版权

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

转载于:https://www.cnblogs.com/dafanjoy/p/7428747.html

dianyuzhi7625

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基于谷歌地图API绘制可编辑圆形与多边形

之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图API封装了个html页面，通过调用js绘制多边形并返回各点的经纬度坐标；当然首先你要保证你的电脑可以打开谷歌地图。。。新建一个html页面<!DOCTYPE html><html><head> <title>googel Map</tit...
复制链接

扫一扫