百度地图api显示定位点和其周围的搜索点

梦里梦外; 2022-08-13 04:58 530阅读 0赞

先定位到自己的位子，然后判断数据库中的点是否在定位点的圆形区域内，在则显示出来，并为每个点增加点击显示信息

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>社保卡受理地点</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    
    <script language=javascript src="${pageContext.request.contextPath}/cc/scripts/jquery.min.js"></script>
    <script language=javascript src="${pageContext.request.contextPath}/cc/services/socialcard/localdata.js"></script>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=H4W2bUuaeY2i37BRgx7BCZkp"></script>
    	<style type="text/css">
    		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap{width:100%;height:500px;}
    		p{margin-left:5px; font-size:14px;}
    	</style>
    </head>
    <body>
    	<p style="font-size:16px; font-weight:600 ">社保卡受理地点查询</p>
    	如果开启定位绿色点为自己所在位子<br>
    	<div id="allmap">
    	
    	</div>
    </body>
    <script type="text/javascript">
    	var map = new BMap.Map("allmap");    // 创建Map实例
    	map.centerAndZoom(new BMap.Point(121.487899,31.249162), 12);//上海市中心坐标
    	map.addControl(new BMap.NavigationControl()); //添加缩放控件
    	map.addControl(new BMap.ScaleControl()); //添加比例尺控件
    	map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件
    	map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
    	map.enableKeyboard(); // 启用键盘操作。
    	
    	var opts = {
    			  width : 200,     // 信息窗口宽度
    			  //height: 100,     // 信息窗口高度
    			  title : "社保卡地点信息" , // 信息窗口标题
    			  enableMessage:true,//设置允许信息窗发送短息
    			  message:"我现在有事需要联系你！"
    			};
    	
    	var geolocation = new BMap.Geolocation();
    // 	var pt = new BMap.Point(116.417, 39.909);
    	var myIcon = new BMap.Icon("${pageContext.request.contextPath}/cc/services/socialcard/images/marker_green.png", new BMap.Size(30,30));
    	geolocation.getCurrentPosition(function(r){
    	    if(this.getStatus() == BMAP_STATUS_SUCCESS){
    		    var mk = new BMap.Marker(r.point,{icon:myIcon});
    		    map.addOverlay(mk);
    	        map.centerAndZoom(r.point, 13);
    	        map.panTo(r.point);
    	        //alert('您的位置：'+r.point.lng+','+r.point.lat);
    	        //var point = new BMap.Point(r.point.lng, r.point.lat);
    	        var circle = new BMap.Circle(r.point,3000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:""});
    	        
    	        var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
    	        
    	        for(var i = 0; i<data.list.length; i++ ){
    				(function(){
    				//var company = data.list[i].name;
    				var localA = data.list[i].address;
    				var ph = data.list[i].phone;
    				var myGeo = new BMap.Geocoder();
    				// 将地址解析结果显示在地图上,并调整地图视野,result是一个point点
    				myGeo.getPoint(localA, function(result){
    					if (result) {
    						//alert(result.lat);
    						if(bounds.containsPoint(result)){
    // 							alert(result.lat);
    							var marker = new BMap.Marker(result);
    	// 						if(flag){
    	// 							map.centerAndZoom(result, 13);
    	// 							flag = false;
    	// 						}
    							map.addOverlay(marker);
    							
    							var infoWindow = new BMap.InfoWindow("受理地址："+localA+"<br>电话："+ph, opts);  // 创建信息窗口对象 
    							
    					 	 	marker.addEventListener("click", function(){          
    								map.openInfoWindow(infoWindow,result); //开启信息窗口
    							}) ; 
    						}
    						
    				 		//marker_1.addEventListener("click",openInfo.bind(null,infoWindow));
    					}
    			
    				}, "上海市");
    				 })();
    			}
    	        
    	    	map.addOverlay(circle); 
    	    }
    	    else {
    	        alert('failed'+this.getStatus());
    	    }        
    	},{enableHighAccuracy: true});
    	
        function getSquareBounds(centerPoi,r){
            var a = Math.sqrt(2) * r; //正方形边长
          
            mPoi = getMecator(centerPoi);
            var x0 = mPoi.x, y0 = mPoi.y;
         
            var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
            var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
            
            var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
            return new BMap.Bounds(sw, ne);        
            
        }
        
      //根据球面坐标获得平面坐标。
        function getMecator(poi){
            return map.getMapType().getProjection().lngLatToPoint(poi);
        }
        //根据平面坐标获得球面坐标。
        function getPoi(mecator){
            return map.getMapType().getProjection().pointToLngLat(mecator);
        }
    </script>
    </html>

![SouthEast][]

[SouthEast]: /images/20220810/d9133e5c7a52473b8b3854487fc72b03.png