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

最新推荐文章于 2024-04-17 16:47:52 发布

原创最新推荐文章于 2024-04-17 16:47:52 发布 · 6.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #api #搜索

javascript 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了如何结合百度地图API进行定位操作，同时检查数据库中的点是否在用户当前位置的一定范围内，若在，则将这些点显示出来，并为每个点添加点击后显示详细信息的功能。

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

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

<%@ 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>