百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
- 写了一天，以下是我自己摸索出来的，暂时只做了两层地图，废话不多说，上图上代码
图片：
第一层地图
点击圆形覆盖物或者放大地图进入第二层地图，缩放会回到第一层
拖拽地图或者缩放地图会触发可视化数据
下拉滚动条自动加载数据，滑动滚动条到底部自动加载6条
html：(具体不贴出)
...
JS：(map.js)
第一层地图（因为第二层地图两种写法，所有拆开写）
注意：
fillColor：不给值表示不填充，这样就不会影响区划里的遮盖物了，也可以给填充色并设置透明度
$(document).ready(function(){
var point = new BMap.Point(120.165366,30.286491);
...
init(json,point);
});
var map = "";//第一层
var map2 = "";//第二层
var jsons;
/**
* 第一层地图
* json：后台返回的json数据（楼盘表：楼盘的基本信息和经纬度）
* area_json：后台返回的区域数据（区域表：区域的基本信息和经纬度）
* 类似以下：
* //区域
* var area_json = [{id:15,area_name:"杭州",longitude:"120.165366",latitude:"30.286491"},{id:16,area_name:"金华",longitude:"119.627245",latitude:"29.111935"},{id:17,area_name:"宁波",longitude:"121.483073",latitude:"29.828361"}];
*/
function init(json,point){
jsons = json;
// 创建Map实例
map = new BMap.Map("container");
map.centerAndZoom(point, 10);
map.setMinZoom(10);//设置缩放最小级别
map.addControl(new BMap.MapTypeControl({//添加控件
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
//遍历区域
for (var i in area_json) {
cover(area_json[i]);
}
}
/**
* 第一层地图覆盖物
* @param obj
*/
function cover(obj){
var point = new BMap.Point(obj.longitude,obj.latitude);
//创建圆形覆盖物
var circle = new BMap.Circle(point,20000,{
fillColor:"#486090",strokeWeight:1,fillOpacity:0.9,strokeOpacity:0,strokeColor:"#486090"
});
//获取楼盘数
$.post("/house_count" , {id : obj.id} , function(count){
if(count == 0){//没有楼盘的区域不显示
return;
}
// 创建文本标注对象
var label = new BMap.Label(""+obj.area_name+"
"+count+"个楼盘
", {
position : point,// 指定文本标注所在的地理位置
offset : new BMap.Size(-25, -16) //设置文本偏移量
});
//设置文本标注属性
label.setStyle({
color : "#FFF",
backgroundColor:'transparent',//文本背景色
borderColor:'transparent',//文本框边框色
fontSize : "10px",
height : "12px",
lineHeight : "15px",
fontFamily:"微软雅黑"
});
//行政区域边界
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get(obj.area_name, function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
//fillColor：不给值表示不填充，这样就不会影响区划里的遮盖物了，也可以给填充色并设置透明度
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, fillColor: '',fillOpacity:0}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
});
}
label.disableMassClear();//禁止文本标注被覆盖物被map清除
map.addOverlay(label);//添加文本到地图容器
label.addEventListener("click",function(){//点击文本
//隐藏第一张地图
document.getElementById("container").style.display="none";
//显示第二张图
document.getElementById("container_two").style.display="block";
map_two(jsons,point);
});
circle.disableMassClear();//禁止圆形覆盖物被map清除
map.addOverlay(circle);//添加圆形覆盖物到地图容器
//鼠标进入圆形覆盖物
circle.addEventListener("mouseover",function(){
circle.setFillColor("#90C030");
circle.setStrokeColor("#90C030");
getBoundary();//行政边界
});
//鼠标离开圆形覆盖物
circle.addEventListener("mouseout",function(){
circle.setFillColor("#486090");
circle.setFillColor("#486090");
map.clearOverlays();
});
//鼠标点击圆形覆盖物
circle.addEventListener("click",function(){
//隐藏第一张地图
document.getElementById("container").style.display="none";
//显示第二张图
document.getElementById("container_two").style.display="block";
map_two(jsons,point);//调用第二张地图方法
});
});
//地图更改缩放级别结束时触发触发此事件
map.addEventListener("zoomend",function(){
if(map.getZoom() >= 12){
document.getElementById("container").style.display="none";
document.getElementById("container_two").style.display="block";
map_two(jsons,map.getCenter());//开启第二层地图，获取地图中心点经纬度
}
});
}
第二层地图
第一种：普通的标记和信息窗口覆盖物
缺点：不灵活
遇到的问题：1.进入地图所有标记的信息窗口默认全部打开。2.信息窗口左下角阴影。（我抓包看了一下，阴影在图片里，不好搞）
以上遇到的两个问题鹅厂地图没遇到过，小弟功力尚欠，有大佬解决的下方留言，以下贴出问题图片：
/**
* 第二层地图
*/
function map_two(json,point_one) {
// 创建Map实例
map2 = new BMap.Map("container_two");
map2.centerAndZoom(point_one, 14);
map2.setMinZoom(10);
map2.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map2.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
for(var i in json.data){
//标记
addMarker(json.data[i]);
}
//创建标注
function addMarker(obj){
//获取经纬度
var point = new BMap.Point(obj.longitude,obj.latitude);
//自定义标注
var myIcon = new BMap.Icon("../image/biaoji.png", new BMap.Size(25,25),{infoWindowAnchor:new BMap.Size(13,13)});
var marker = new BMap.Marker(point,{icon:myIcon});
marker.setTitle(obj.title);
map2.addOverlay(marker);
//文本
// var label = new BMap.Label(obj.title,{offset:new BMap.Size(15,-10)});
// label.setStyle({
// color : "#000000",
// borderColor:"#000000",
// fontSize : "10px",
// height : "20px",
// lineHeight : "15px",
// fontFamily:"微软雅黑"
// });
// marker.setLabel(label);
(function() {
marker.addEventListener("click",function(){
showInfo(this,obj);
});
})();
}
//显示信息窗口，显示标注点的信息。
function showInfo(thisMaker,obj){
var sContent = ''+obj.title+'
'+
''+obj.property_type+' '+obj.price_rmb+''+
' 元/㎡ '+obj.price_bs+'₱/㎡
';
var infoWindow = new BMap.InfoWindow(sContent,{width:250}); // 创建信息窗口对象
thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
}
visual(json);//初始化可视化数据
//停止拖拽地图时触发可视化数据
map2.addEventListener("dragend",function(){
visual(json);
});
//地图更改缩放级别结束时触发触发此事件
map2.addEventListener("zoomend",function(){
visual(json); //缩放时触发可视化数据
if(map2.getZoom() <= 10){
document.getElementById("container_two").style.display="none";//隐藏第二张地图
document.getElementById("container").style.display="block";//显示第一张
...
init(jsons,map2.getCenter());//获取地图中心点
}
});
}
第二层地图
第二种：自定义覆盖物
我使用的第二种
遇到的问题：覆盖物优先级
样式元素可以你们可以自己写
/**
* 第二层地图
*/
function map_two(json,point_one) {
// 创建Map实例
map2 = new BMap.Map("container_two");
map2.centerAndZoom(point_one, 14);
map2.setMinZoom(10);
map2.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map2.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
for(var i in json.data){
//标记
addMarker(json.data[i]);
}
//创建标注
function addMarker(obj){
//获取经纬度
var point = new BMap.Point(obj.longitude,obj.latitude);
//定义自己的覆盖物实体
function ComplexCustomOverlay(lon, lat,img,obj) {
this._point = new BMap.Point(lon, lat);
this._lon = lon;
this._lat = lat;
this._img = img;
this._obj = obj;
};
//继承API的BMap.Overla
ComplexCustomOverlay.prototype = new BMap.Overlay();
//重写初始化自定义覆盖物构造
ComplexCustomOverlay.prototype.initialize = function (map) {
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
//让文字不被选中
div.style.MozUserSelect = 'none';
div.style.height = "27px";
div.style.width="27px";
var oneDiv = document.createElement("div");
$(oneDiv).css({
"height":"30",
"width":"25",
"white-space": "nowrap",//段落中的文本不进行换行
"color":"#fff",
"text-align":"center",
"line-height":"30px"
});
$(div).append(''+obj.title+'X
'+
''+obj.property_type+' '+obj.price_rmb+''+
' 元/㎡ '+obj.price_bs+'₱/㎡
');
div.appendChild(oneDiv);
// 根据参数设置元素外观(标记)
div.style.background = "url(" + this._img + ")";
$(div).click(function(){
map.centerAndZoom(point,15);//定位视野
$(this).css("z-index","-999");//z-index:如果为正数，则离用户更近，为负数则表示离用户更远
$(this).children(".detail").css("display","block");
});
$(div).find("#del").click(function(e){
map.centerAndZoom(point,15);//定位视野
$(div).children(".detail").css("display","none");
e.stopPropagation();//防止冒泡和捕获
e.preventDefault();//取消默认事件
});
// 保存div实例
this._div = div;
// 将div添加到覆盖物容器中
map.getPanes().labelPane.appendChild(div);
return div;
};
//重写draw,调整偏移位置
ComplexCustomOverlay.prototype.draw = function () {
// 根据地理坐标转换为像素坐标，并设置给容器
var pixel = this._map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - 19 + "px";
this._div.style.top = pixel.y - 33 + "px";
};
//创建并添加到容器
var myOverlay1 = new ComplexCustomOverlay(obj.longitude,obj.latitude,"../image/biaoji.png",obj);
map2.addOverlay(myOverlay1);
}
visual(json);//初始化可视化数据
//停止拖拽地图时触发
map2.addEventListener("dragend",function(){
visual(json);
});
//地图更改缩放级别结束时触发触发此事件
map2.addEventListener("zoomend",function(){
if(map2.getZoom() <= 10){
document.getElementById("container_two").style.display="none";
document.getElementById("container").style.display="block";
//清除新房数据
$("#result").html("");
init(jsons,map2.getCenter());//获取地图中心点
}
});
}
可视化数据
就是可见的范围内有多少标记
/**
* 可视化数据
*/
function visual(json) {
//清除新房数据
$("#result").html("");
//可视范围楼盘数和数据显示
var bound = map2.getBounds();//返回地图可视区域
var arr = [];//可视楼盘数量
var table = "可视范围内找到个新房，共"+$("#all_count").val()+"个
";
for(var i in json.data){
(function(n) {
//判断是否在可视范围内
if(bound.containsPoint(new BMap.Point(json.data[n].longitude,json.data[n].latitude))==true){
arr.push("1");
table += "![]("+img_url+")
" +
""+json.data[n].title+"
"+json.data[n].property_type+""+area+"
" +
""+json.data[n].price_rmb+"元/㎡
"+json.data[n].price_bs+"₱/㎡
" +
""+json.data[n].house_feature+"
";
}
})(i);
}
if(arr.length>0){
$("#result").append(table);
$("#visual").html(arr.length);
}else{
$("#result").append("当前可视范围内未找到房源哦!");
}
}
滑动滚动条到底部自动加载6条
/**
*下拉自动加载10条数据
*/
//初始页
var currentPage = 1;
//每页显示的条数
var showLinePage = 8;
//总页数
var pageNum = 1;
//总记录数
var totalCount = $("#all_count").val();
pageNum = parseInt(totalCount/showLinePage);
if((totalCount % showLinePage) != 0){
pageNum += 1;
}
if(pageNum == 0){
pageNum = 1;
}
//下一页
function nextPage(){
if( ++currentPage > pageNum){
currentPage = pageNum ;
}
}
//定义在事件外边，防止被覆盖
var iTime;
/**
* 内部滚动条
* 当滚动条滑动，触发事件，判断是否到达最底部
*/
$("#result").on('mousewheel', function(event) {
var scrollHeight = document.getElementById("dataTop").scrollHeight;//是div里内容的高度，根据内容的增加和减少变化。
var scrollTop = document.getElementById("dataTop").scrollTop;//是div内里框框的高度
var clientHeight = document.getElementById("dataTop").clientHeight;//是滚动条的最上端到，div上端内里框框的高度
//滚动到底会连续多次触发事件，造成多次请求，数据重复显示
//解决：事件多次触发，只执行最后一次
clearTimeout(iTime);
iTime = setTimeout(function () {
//判断是否到达最底部
if(scrollHeight - clientHeight == scrollTop){
nextPage();//下一页
if(totalCount > jsons.data.length){//判断够不够下一页。
//调用ajax处理函数异步加载数据
$.post("/house_list_data" , {cndtn1:cndtn1,cndtn2:cndtn2,cndtn3:cndtn3,currentPage : currentPage, showLinePage : showLinePage} , function(data){
var json = JSON.parse(data);
if(json.status != "success"){
$(".fail-dialog").html(json.errMsg);
$(".fail-dialog").show().delay(2000).fadeOut();
return;
}
//新数据动态追加到已有的数据里
for (var i = 0, l = json.data.length; i < l; i++) {
jsons.data.push(json.data[i]);
}
//可视范围楼盘数和数据显示
var bound = map.getBounds();//返回地图可视区域
var arr = [];//可视楼盘数量
var area = "";
var img_url = "";
var table = "";
for(var n in json.data){
//判断是否在可视范围内
if(bound.containsPoint(new BMap.Point(json.data[n].longitude,json.data[n].latitude))==true){
arr.push("1");
if(json.data[n].smallarea==""||json.data[n].smallarea==undefined){
if(json.data[n].bigarea==""||json.data[n].bigarea==undefined){
area="";
}else{
area=""+json.data[n].bigarea*1+"㎡ ";
}
}else{
area=""+json.data[n].smallarea*1+"~"+json.data[n].bigarea*1+"㎡ ";
}
if(json.data[n].img_url==''||json.data[n].img_url==undefined){
img_url="../image/nodata.png";
}else{
img_url=json.data[n].img_url;
}
table += "";
}
}
if(arr.length>0){
$("#dataTop").append(table);
$("#visual").html((arr.length + parseInt($("#visual").html())));
}else if(jsons.data.length <= 0){
$("#result").append("很抱歉，没有找到合适的房源，请重新查找!");
}else if(arr.length <= 0){
$("#result").append("当前可视范围内未找到房源哦!");
}
//传新数据调用方法
init(jsons,map.getCenter());
});
}
}
}, 100);
});