用百度地图实现添加电子围栏并判断是否在范围内

最新推荐文章于 2023-12-12 16:22:57 发布

小贾乐

最新推荐文章于 2023-12-12 16:22:57 发布

阅读量6.2k

点赞数 4

分类专栏： HTML 文章标签：百度地图电子围栏

本文链接：https://blog.csdn.net/Q2847292813/article/details/84893935

版权

HTML 专栏收录该内容

0 篇文章

订阅专栏

用百度地图实现添加电子围栏并判断是否在范围内

做一个社区矫正系统时，误以为是给每个人设置一个活动范围，做了一个Demo，
以用户位置为中心，设置电子围栏半径并判断是否在范围内

预览：
在这里插入图片描述 HTML代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q9U1Y53LM1WDwF2qNUYAraf9qEbQ7w58"></script>
    <!--加载计算工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
   
</head>

<body>
<!--百度地图容器-->
<div style="width:1200px;height:650px;border:#ccc solid 1px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
    var lng;
    var lat;
    var circle=[];
	var map;
    var point;

	//添加用户标注
		var point2s = [  
      new BMap.Point(112.586149,26.913201),  
      new BMap.Point(112.58464,26.909432),  
      new BMap.Point(112.585143,26.899219),  
      new BMap.Point(112.600953,26.898832),  
      new BMap.Point(112.607421,26.900572),  
      new BMap.Point(112.606631,26.904825),  
      new BMap.Point(112.606523,26.909142),  
      new BMap.Point(112.59772,26.909399),
      ];
	  var radius=1000.0;
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        addMarker(point2s);//创建标注，创建电子围栏
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        point = new BMap.Point(112.59772,26.909399);
        map.centerAndZoom(point, 15);
	
    }
	//创建标注点并添加到地图中
function addMarker(points) {
	
    //循环建立标注点
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var marker = new BMap.Marker(points[i]); //将点转化成标注点
        map.addOverlay(marker);  //将标注点添加到地图上
		
		  //电子围栏
	 circle.push(new BMap.Circle(points[i],1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3})); //创建圆
                map.addOverlay(circle[i]);
				
				//添加监听事件
        (function() {
            var thePoint = points[i];
			var c=circle[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint,c);
            });
         })();  
    }
}
	function showInfo(thisMarker,point,c) {
	
		//判断点是否在
		if(BMapLib.GeoUtils.isPointInCircle(point,c)){
		  var infoWindow = new BMap.InfoWindow("在圆形区域内");
		  thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
	  }else
	  {
		 var infoWindow = new BMap.InfoWindow("不在圆形区域内");
		  thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
	  }
	}
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
        map.addControl(overviewControl);
    }
    initMap();
</script>
</html>