百度地图点maker在区域判断（圆Circle，多边形polygon，矩形rectangle，线line上）

最新推荐文章于 2022-06-30 11:11:32 发布

tianmeng1999

最新推荐文章于 2022-06-30 11:11:32 发布

阅读量819

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/weixin_42448623/article/details/100661571

版权

百度地图专栏收录该内容

14 篇文章 1 订阅

订阅专栏

百度地图秘钥申请(AK)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点在区域判断</title>
    <style>
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #container{height:100%} 
    </style>
    <!-- <script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script> -->
    <script src="./GeoUtils_min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>
</head>
<body>
    <!-- 文档参考地址 http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html  -->

    <div id="container"></div> 
    <script>
        // 创建地图实例 
        var map = new BMap.Map("container");
        // 创建点坐标 
        var point = new BMap.Point(112.65006477722177,26.929189759678234);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.MapTypeControl());// 地图类型 
        var Scaleopts = { // 配置
            anchor: BMAP_ANCHOR_TOP_LEFT, //控件的停靠位置
            offset: new BMap.Size(10,10), //控件的水平偏移值
        }
        map.addControl(new BMap.ScaleControl(Scaleopts));// 比例尺
        map.addControl(new BMap.OverviewMapControl());// 缩略地图
        //设置卫星
        map.setMapType(BMAP_SATELLITE_MAP);//设置卫星地图

        //添加标注
        var mark = new BMap.Marker(point);
        map.addOverlay(mark);
        var label = new BMap.Label("圆",{position:point});
        map.addOverlay(label);
        
        //画圆
        var Circle = new BMap.Circle(point,500,{
            //CircleOptions
            strokeColor:"red",//边框色
            fillColor:"green",//填充色
            strokeWeight:1,//边框宽
            strokeOpacity:0.5,//边框透明度
            fillOpacity:0.3,//填充透明度
            strokeStyle:"solid",//边框线样式
            enableEditing:false,//是否启用线编辑，默认为false
            enableClicking:false//是否响应点击事件，默认为true
        });
        map.addOverlay(Circle)

        

        var points = [
            {"point":new BMap.Point(112.638886,27.052889),"name":"点一"},
            {"point":new BMap.Point(112.243344,26.748755),"name":"点二"},
            {"point":new BMap.Point(112.552509,26.926427),"name":"衡州别院"},
            {"point":new BMap.Point(112.5783703713,26.8995635436),"name":"衡阳市人民政府"},
            {"point":new BMap.Point(112.6379079719,26.8948866350),"name":"衡阳火车站"},
            {"point":new BMap.Point(112.5962682402,26.9041238628),"name":"南华大学"},
            {"point":new BMap.Point(112.5600814819,26.8928800357),"name":"南华大学附属第二医院"},
            {"point":new BMap.Point(112.5561869144,26.8928034872),"name":"生态公园-北门"},
            {"point":new BMap.Point(112.6234089966,26.9170718962),"name":"石鼓书院"},
        ]
        var polygonArr = [];
        for(var i=0;i<points.length;i++){
            polygonArr.push(points[i].point)
        }
        //创建多边形
        var polygon = new BMap.Polygon(polygonArr, {
            fillColor:'red',
            strokeColor:"blue", 
            strokeWeight:2, 
            strokeOpacity:0.5});  
        map.addOverlay(polygon);
       
    

	    var pStart = new BMap.Point(112.6379079719,26.9041238628);
        var pEnd = new BMap.Point(112.6234089966,26.9170718962);
        var mark3 = new BMap.Marker(pStart);
        map.addOverlay(mark3);
        var label3 = new BMap.Label("矩形",{position:pStart});
        map.addOverlay(label3);
        //创建矩形 还是多边形
	    var rectangle = new BMap.Polygon([
		    new BMap.Point(pStart.lng,pStart.lat),
		    new BMap.Point(pEnd.lng,pStart.lat),
		    new BMap.Point(pEnd.lng,pEnd.lat),
		    new BMap.Point(pStart.lng,pEnd.lat)
	    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  

        map.addOverlay(rectangle);

        var bounds = new BMap.Bounds(pStart,pEnd);
        console.log("Bounds:",bounds)

        map.addEventListener("click",e=>{
            
            //判断 point 是否在圆形内部
            if(BMapLib.GeoUtils.isPointInCircle(e.point, Circle)){ 
                console.log("在圆形内部")
            }else{
                console.log("不在圆形内部")
            }

            //判断 point 是否在多边形内部
            if(BMapLib.GeoUtils.isPointInPolygon(e.point, polygon)){ 
                console.log("在多边形内部")
            }else{
                console.log("不在多边形内部")
            }
            //判断 point 是否在矩形内部
            if(BMapLib.GeoUtils.isPointInPolygon(e.point, rectangle)){ 
                console.log("在多边形rectangle内部")
            }else{
                console.log("不在多边形rectangle内部")
            }
            
            // if(BMapLib.GeoUtils.isPointInRect(e.point, Bounds)){ 
            // bounds.containsPoint(e.point)
            // if(bounds.containsPoint(e.point)){ 
            //     console.log("在多矩形内部")
            // }else{
            //     console.log("不在矩形内部")
            // }

            //判断 point 是否在线上
            //BMapLib.GeoUtils.isPointOnPolyline(point, polyline)

            //计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬度，且不适合计算自相交多边形的面积
            //BMapLib.GeoUtils.getPolygonArea(polygon)
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

tianmeng1999

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图点maker在区域判断（圆Circle，多边形polygon，矩形rectangle，线line上）

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫