高德地图web js实现画多边形，圆。判断一个点是否在多边形或圆里

时间：2025-04-02 17:23:54
 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="/lbs/static/"/>
    <link rel="stylesheet" href="/lbs/static/AMap."/>
    <style>
        #container{
            width:84%;
            height: 100%;
            position:relative;
            overflow: hidden;
            float: right;
        }
        #tool{
            width: 16%;
            height: 100%;
            overflow: auto;
            box-shadow:0 0 14px rgba(0,0,100,.2);
            height: 100%;
            background-color: white;
            float: right;
            z-index: 9999;
        }
    </style>
    <script type="text/javascript" src="/maps?v=1.3&key=3f106cab686aa907fae5d023cca93351&plugin=,,,"></script>
    <script type="text/javascript" src="/lbs/static/"></script>
    <script type="text/javascript" src="/lbs/static/"></script>
</head>
<body>

<div ></div>
<div >
    <center>
        <button >画圆</button>
        <button >矩形</button>
        <button >多边形</button>
        <button >清除</button>
        <button >判断一个点是否在一个圆里</button>
        <button >判断一个点是否在一个多边形里</button>
    </center>
</div>
<div >

</div>
<div style="height: 10%;float: left">
</div>
<script src="./"></script>
<script type="text/javascript">

    var status;

    var map = new ("container", {
        resizeEnable: true
    });

    ([""],function(){   //在地图中添加ToolBar插件
        toolBar = new ();
        (toolBar);
    });
    ();

    ([""],function(){        //鼠标工具插件
        mousetool = new (map);
    });
    $('#circle').click(function(){
        status = 'circle';
        ();
    });
    $('#rectangle').click(function(){
        status = 'rectangle';
        ();
    });
    $('#polygon').click(function(){
        status = 'polygon';
        ();
    });

    (mousetool, 'draw', function(e) {
        //arr = ();//获取路径坐标
        if(status == 'circle'){
            lng = ().lng;
            lat = ().lat;
            radius = ();
        }else if(status == 'polygon' || status == 'rectangle'){
            var path = ();
            arr = [];
            for(var i=0;i<;i++){
                ([path[i].lng,path[i].lat]);
            }
            (arr);
        }

        //(());
        //();
    });

    $('#closeMouse').click(function(){
        (true);
    });

    var lat;
    var lng;
    var radius;

    $('#testCircle').click(function(){
        var myLngLat = new (116.403984,39.907535);
        var circle = new ({
            center: new (lng,lat),// 圆心位置
            radius: radius //半径
        });
        if((myLngLat)){
            alert('在');
        }else{
            alert('不在');
        }
    });

    var arr = [];


    $('#testPolygon').click(function(){
        var myLngLat = new (116.403984,39.907535);
        // 定义一个多边形
        var polygon = new ({
            path: arr
        });

        if((myLngLat)){
            alert('在');
        }else{
            alert('不在');
        }
    });
</script>
</body>
</html>
 

相关文章