谷歌地图相关dome （主要是利用谷歌地图进行多边形绘画）

于 2019-07-04 16:39:04 发布
阅读量1.6k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1270157189/article/details/94629525
版权
本文详细介绍如何使用谷歌地图API进行地图绘图，包括绘制圆形、多边形，以及实现图形编辑、删除等功能。通过具体代码示例，展示如何设置地图属性、监听地图事件，并提供图形操作的实用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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="js/googleMapDome.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #map {
            height: 80%;
        }
    </style>
</head>
<body onload="initMap('roadmap')">
 
    <div id="map"></div>
    <div onclick="drawCircle(2)">绘制圆形</div>
    <div onclick="deleteDrawCircle(2)">删除绘制图形</div>

</body>
<style scoped>
    .gm-style .gm-style-iw-t::after{
        width: 0px !important;
    }

</style>

</html>

js

var map;
var drawingManager;
var shape;
var Linetype;
var Linecolor;
var LineWeight;
var Aircolor;
var Airtmd;
var AirCircle;
var AirPolygon;
var AirShape = [];
var oldAirShape = [];
var infoWindow;
var infoWindow1;
var returnMap;  // 返回的多边形参数
var polygon = []; 


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
        disableDefaultUI:true, //关闭默认配件集
        mapTypeId: mapType
 
    });

    //设置信息窗口
    infoWindow1=new google.maps.InfoWindow({
        pixelOffset : new google.maps.Size(40, 60),
    });

    var list = [
                {'lat':'39.93051611388278','lng':'116.3582151750552'},
                {'lat':'39.92465815197515','lng':'116.37563880481594'},
                {'lat':'39.92146568082697','lng':'116.36435206928127'},
                {'lat':'39.926040412890295','lng':'116.35285075702541'}, 
            ];
    var list1 = [
                {'lat':'39.92198681109999','lng':'116.36843835179525'},
                {'lat':'39.91300108437418','lng':'116.37157117192464'},
                {'lat':'39.91718140427841','lng':'116.35809575383382'}, 
            ];

    var list2 = [
                {'lat':'39.92742830667513','lng':'116.37701941904925'},
                {'lat':'39.92430178768347','lng':'116.3707966941347'},
                {'lat':'39.9199902483574','lng':'116.37731982645892'}, 
            ];

    returnMap = [
                {'name':'123','list':list},
                {'name':'456','list':list1},
                {'name':'789','list':list2},
            ];

    for (var i = returnMap.length - 1; i >= 0; i--) {
        getCircle(returnMap[i].name,returnMap[i].list);
    }

    //给地图加点击事件
    google.maps.event.addListener(map, 'click', function(e){
        var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        infoWindow.close(); //关闭信息窗口
        // console.log(lat,lng);
        // JudgmentPoint(lat,lng,list);
    });

    //设置信息窗口
    infoWindow=new google.maps.InfoWindow({
        pixelOffset : new google.maps.Size(40, 60),
    });

    


}


//设置空域类型
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){
        console.log(e);
        var array = e.getPath().getArray();
        ReturnLonLat(array);
        shape.setMap(null);     //关闭当前绘制
    }
}
 
//画多边形区域
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 () {
            console.log("click");
        });
        google.maps.event.addListener(newShape.getPath(), 'insert_at', function () {
            console.log("insert_at");
            array = newShape.getPath().getArray();
            ReturnLonLat(array);
        });
        google.maps.event.addListener(newShape.getPath(), 'set_at', function () {
            console.log("set_at");
            array = newShape.getPath().getArray();
            ReturnLonLat(array);
        });
        google.maps.event.addListener(newShape.getPath(), 'remove_at', function () {
            console.log("remove_at");
            ReturnLonLat.setMap(map);
        });
 
    }
 
}

//生成多边形 (type  1 修改多边形)
function ReturnLonLat(arr,type) {
    var strinfo = "";
    var list = [];
    var lat = '';
    var lng = '';
    for (var i = 0; i < arr.length; i++) {
        lat = arr[i].lat()
        lng = arr[i].lng();
        var s = {'lat':''+lat+'','lng':''+lng+''};
        list.push(s);
    };
    // console.log(list);

    // 判断新生成的多边形与以前的多边形是否有重复的
    // returnMap = 
    var a;

    //获取返回的多边形参数
    for (var i = 0; i < returnMap.length; i++) {
        a = isPolygonsOverlap(list,returnMap[i].list);
    }
    if(a){
            console.log("多边形相交！");
            return;
    }else{
       if(type != 1){  
            //生成多边形
            getCircle(list);
        } 
    }

    
    
    //上报经纬度
    
    // window.external.GetShapeLonLat(strinfo);
}

//绘制图形 (type 1为圆形 2多边形)
function drawCircle(type) {
    if(type == 1){
        drawCircleMap();
    }else{
        drawPolygonMap();
    }
}

//关闭图形 (type 1为圆形 2多边形)
function deleteDrawCircle(type) {
    if(type == 1){
        shapecomplete();
    }else{
        console.log(111);

        drawingManager.setOptions(new google.maps.drawing.DrawingManager({
            drawingControl: false,
        }));
        drawingManager.setMap(map);
    }
        
    
}

// 生成多边形
function getCircle(name,list) {
    var path = [];
    for (var i = 0; i < list.length; i++) {
        path.push(new google.maps.LatLng(list[i].lat,list[i].lng));
    }
    // 多边形参数 
    var polygonOptions = { 
        paths: path, 
        fillColor: '#f60', // 填充色 
        fillOpacity: 0.3, // 填充色透明度 
        strokeColor: '#f00', // 线条颜色 黑色 
        strokeOpacity: 0.7, // 透明度 70% 
        strokeWeight: 5, // 宽度 5像素 
    };

    var polygon1 = new google.maps.Polygon(polygonOptions); 
    polygon1.setMap(map); // 设置显示到map上

    // var centerPoint = getCenterPoint(list);     //获取多边形中心点
    // console.log(centerPoint);
    // var lng = centerPoint.split(",")[0];
    // var lat = centerPoint.split(",")[1];
    // console.log(lat,lng);
    // //生成窗口
    // infoWindow1.setPosition(new google.maps.LatLng(lat,lng));
    // infoWindow1.setContent('<div>'+name+'</div>')
    // infoWindow1.open(map);

    //图层的点击事件
    google.maps.event.addListener(polygon1, 'click', function(e){
        infoWindow.close(); //关闭信息窗口
        var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        // polygon1.setDraggable(true);//图形设定可拖动
        // polygon1.setEditable(true);//图形设定可编辑
        // console.log("图层点击事件结束");
    });

    //图层的双击事件
    google.maps.event.addListener(polygon1, 'dblclick', function(e){
        infoWindow.close(); //关闭信息窗口
        var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        // console.log(lat,lng);
    });

    //鼠标拖动结束事件
    google.maps.event.addListener(polygon1, 'dragend', function(e){
        infoWindow.close(); //关闭信息窗口
        var array = polygon1.getPath().getArray();     //得到移动以后的经纬度
        // console.log(array);
        console.log("鼠标拖动结束");
        ReturnLonLat(array,1);  
        polygon1.setDraggable(false);//图形设定可拖动
        // polygon1.setEditable(false);//图形设定可编辑
    });

    //鼠标拖动多边形点结束事件
    google.maps.event.addListener(polygon1, 'mouseup', function(e){
        if(polygon1.getEditable()){  //如果多边形没有触动可编辑状态不用再去获取经纬度
            infoWindow.close(); //关闭信息窗口
            var array = polygon1.getPath().getArray();     //得到移动以后的经纬度
            // console.log(array);
            ReturnLonLat(array,1);  
            console.log("鼠标拖动多边形点结束");
            // polygon1.setDraggable(false);//图形设定可拖动
            polygon1.setEditable(false);//图形设定可编辑
        }
    });

    //鼠标右击事件
    google.maps.event.addListener(polygon1, 'rightclick', function(e){
        var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        // console.log(lat,lng);
        AirPolygon = polygon1
        infoWindow.setPosition(new google.maps.LatLng(lat, lng));
        infoWindow.setContent('<div><button onclick="operating(0)">编辑</button><button onclick="operating(1)">拖动</button><button onclick="operating(2)">删除</button></div>')
        infoWindow.open(map);
    });
    

}


//图层操作 (0 编辑 1 拖动 2删除)
function operating(type){
    if(0 == type){
        AirPolygon.setEditable(true); // 设置图层可编辑
    }else if (1 == type){ 
        AirPolygon.setDraggable(true);  // 设置图层可拖动
    }else{
       AirPolygon.setMap(null); //删除图层
    }
    AirPolygon = ''; 
    infoWindow.close(); //关闭信息窗口
}







//判断两多边形线段是否相交
function isSegmentsIntersectant(segA, segB) {//线线
    const abc = (segA[0].x - segB[0].x) * (segA[1].y - segB[0].y) - (segA[0].y - segB[0].y) * (segA[1].x - segB[0].x);
    const abd = (segA[0].x - segB[1].x) * (segA[1].y - segB[1].y) - (segA[0].y - segB[1].y) * (segA[1].x - segB[1].x);
    if (abc * abd >= 0) {
        return false;
    }
    const cda = (segB[0].x - segA[0].x) * (segB[1].y - segA[0].y) - (segB[0].y - segA[0].y) * (segB[1].x - segA[0].x);
    const cdb = cda + abc - abd;
    return !(cda * cdb >= 0);
}

//判断两多边形边界是否相交
function isPolygonsIntersectant(plyA, plyB) {//面面
    for (let i = 0, il = plyA.length; i < il; i++) {
        for (let j = 0, jl = plyB.length; j < jl; j++) {
            const segA = [plyA[i], plyA[i === il - 1 ? 0 : i + 1]];
            const segB = [plyB[j], plyB[j === jl - 1 ? 0 : j + 1]];
            if (isSegmentsIntersectant(segA, segB)) {
                return true;
            }
        }
    }
    return false;
}

//判断点是否在另一平面图中
function isPointInPolygon(point, polygon) {

    //下述代码来源：http://paulbourke.net/geometry/insidepoly/，进行了部分修改
    //基本思想是利用射线法，计算射线与多边形各边的交点，如果是偶数，则点在多边形外，否则
    //在多边形内。还会考虑一些特殊情况，如点在多边形顶点上，点在多边形边上等特殊情况。

    var N = polygon.length;
    var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
    var intersectCount = 0; //cross points count of x 
    var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
    var p1, p2; //neighbour bound vertices
    var p = point; //测试点

    p1 = polygon[0]; //left vertex        
    for (var i = 1; i <= N; ++i) { //check all rays            
        if (p.x == p1.x && p.y == p1.y) {
            return boundOrVertex; //p is an vertex
        }

        p2 = polygon[i % N]; //right vertex            
        if (p.y < Math.min(p1.y, p2.y) || p.y > Math.max(p1.y, p2.y)) { //ray is outside of our interests                
            p1 = p2;
            continue; //next ray left point
        }

        if (p.y > Math.min(p1.y, p2.y) && p.y < Math.max(p1.y, p2.y)) { //ray is crossing over by the algorithm (common part of)
            if (p.x <= Math.max(p1.x, p2.x)) { //x is before of ray                    
                if (p1.y == p2.y && p.x >= Math.min(p1.x, p2.x)) { //overlies on a horizontal ray
                    return boundOrVertex;
                }

                if (p1.x == p2.x) { //ray is vertical                        
                    if (p1.x == p.x) { //overlies on a vertical ray
                        return boundOrVertex;
                    } else { //before ray
                        ++intersectCount;
                    }
                } else { //cross point on the left side                        
                    var xinters = (p.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x; //cross point of x                        
                    if (Math.abs(p.x - xinters) < precision) { //overlies on a ray
                        return boundOrVertex;
                    }

                    if (p.x < xinters) { //before ray
                        ++intersectCount;
                    }
                }
            }
        } else { //special case when ray is crossing through the vertex                
            if (p.y == p2.y && p.x <= p2.x) { //p crossing over p2                    
                var p3 = polygon[(i + 1) % N]; //next vertex                    
                if (p.y >= Math.min(p1.y, p3.y) && p.y <= Math.max(p1.y, p3.y)) { //p.y lies between p1.y & p3.y
                    ++intersectCount;
                } else {
                    intersectCount += 2;
                }
            }
        }
        p1 = p2; //next ray left point
    }

    if (intersectCount % 2 == 0) { //偶数在多边形外
        return false;
    } else { //奇数在多边形内
        return true;
    }
}

//判断两多变形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
function isPointInPolygonBidirectional(plyA, plyB) {//面面
    let [a, b] = [false, false];
    a = plyA.some(item => isPointInPolygon(item, plyB));
    if (!a) {
        b = plyB.some(item => isPointInPolygon(item, plyA));
    }
    return a || b;
}

//判断多边形是否重叠
function isPolygonsOverlap(plyA, plyB) {
    plyA = pathConvert(plyA);
    plyB = pathConvert(plyB);
    return isPolygonsIntersectant(plyA, plyB) || isPointInPolygonBidirectional(plyA, plyB);
}


// 将经纬度转为平面坐标
function pathConvert(polygon){
    var returnConvert = [];
    for (var i = polygon.length - 1; i >= 0; i--) {
        var lng = (polygon[i].lng + 180) * (256 << 2) / 360 + 512;
        var lat = (128 << 2) * (1 - (Math.log((1 + (Math.sin(polygon[i].lat * Math.PI / 180))) / (1 - (Math.sin(polygon[i].lat * Math.PI / 180))))) / (2 * Math.PI));
        var s = {'x':''+lng+'','y':''+lat+''};
        returnConvert.push(s);
    }
    return returnConvert;
}

//计算多边形中心点
function getCenterPoint(path) {
  //var path =e.;//Array<Point> 返回多边型的点数组
  //var ret=parseFloat(num1)+parseFloat(num2);
  var x = 0.0;
  var y = 0.0;
  for (var i = 0; i < path.length; i++) {
    x = x + parseFloat(path[i].lng);
    y = y + parseFloat(path[i].lat);
  }
  x = x / path.length;
  y = y / path.length;

  var xy = x+","+y
  return xy;
}

直接可以使用，但是有些功能未完善，欢迎提出疑问，共同学习

龍鸿曦
关注
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值