百度地图创建marker坐标,添加自定义标注:
//首先要引入百度api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ak=你的密钥&s=1"></script>
function drawmap(){
//创建地图
var map = new BMap.Map("LeftDown");
//允许缩放
map.enableScrollWheelZoom(true);
//只留下地图和卫星
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));
var points=[];
$.ajax({
url:"${webRoot}/user/******",
async: false,//同步
success:function(data){
for(var i=0;i<data.length;i++){
var info="";//接收经纬度信息
info={"lng":data[i].longitude,"lat":data[i].latitude,"name":data[i].tenant_name,"count":data[i].count,"address":data[i].contact_address};
points.push(info);
}
}
});
setZoom(points);
//获取中心点
function setZoom(points){
if(points.length>0){
var maxLng = points[0].lng;
var minLng = points[0].lng;
var maxLat = points[0].lat;
var minLat = points[0].lat;
var res;
for (var i = points.length - 1; i >= 0; i--) {
res = points[i];
if(res.lng > maxLng) maxLng =res.lng;
if(res.lng < minLng) minLng =res.lng;
if(res.lat > maxLat) maxLat =res.lat;
if(res.lat < minLat) minLat =res.lat;
};
var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2; //缩放中心的精度
var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2; //缩放中心的纬度
var zoom = getZoom(maxLng, minLng, maxLat, minLat); //缩放级别
map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);//中心点和缩放级别
}else{
//没有坐标,显示全中国
map.centerAndZoom(new BMap.Point(103.388611,35.563611), 4);
return false;
};
}
//获取最佳缩放级别
function getZoom (maxLng, minLng, maxLat, minLat) {
var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"];//级别18到3。
var pointA = new BMap.Point(maxLng,maxLat); // 创建点坐标A
var pointB = new BMap.Point(minLng,minLat); // 创建点坐标B
var distance = map.getDistance(pointA,pointB).toFixed(1); //获取两点距离,保留小数点后两位
for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
if(zoom[i] - distance > 0){
return 18-i+2;//之所以会多2,是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加2。
}
};
}
//创建标注点并添加到地图中
addMarker(points);
function addMarker(points) {
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
var marker = new BMap.Marker(point); //将点转化成标注点
map.addOverlay(marker); //将标注点添加到地图上
var label = new BMap.Label("自定义文字",{offset:new BMap.Size(20,-10)});
label.setStyle({"borderColor":"gray"});//设置框的样式
marker.setLabel(label);//添加自定义提示框
//循环添加监听事件
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
var q=map.getZoom();
console.log(q);
});
})();
}
}
function showInfo(thisMarker,point) {
//获取点的信息
var sContent = '<ul>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 40px;display: inline-block;">名称:</span>' + point.name + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width:90px;display: inline-block;">预警人数:</span><a style="font-size:15px" href="${webRoot}/warning/gotocirsesWarning">'+point.count+'</a></li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width:40px;display: inline-block;">地址:</span>'+point.address+'</li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
}