百度地图api显示定位点和其周围的搜索点
先定位到自己的位子，然后判断数据库中的点是否在定位点的圆形区域内，在则显示出来，并为每个点增加点击显示信息
<%@ 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>
