载入房源信息
map.on('complete', fun() ) // 地图加载完毕后调用fun
这里把载入房源放到这个回调函数中
1. 请求数据
1.通过ajax请求"/location_all"这个路径,获取房源坐标
2.遍历列表,实例化所有的点,图标为自定义图标
3.给marker设置属性code值为房源的id
4.给所有房源注册点击事件
5.把所有房源点,加入markers数组中
6.开始点的聚合
// 地图加载完成后载入房源
map.on('complete', function() {
$.get("/location_all",function (data) {
points = data.result;
for(i=0;i<points.length;i++){
marker = new AMap.Marker({
position:points[i].address,
map: map,
offset:{x:-8,y:-34}, //相对于基点的位置
icon:room_icon,
});
marker.code = points[i].code;
marker.on("click",showInfo); // 注册事件
markers.push(marker);
};
addCluster(1); // 开始聚合
});
});
2.实例化一个图标作为自定义房源图标
var markers = [];
var room_icon = new AMap.Icon({
size: new AMap.Size(40,50), //图标大小
image: "/static/imgs/room.ico", //图片资源路径
imageOffset: new AMap.Pixel(0, 0)
})
3.点的聚合
var cluster = null;
function addCluster(tag){
if(cluster) {
cluster.setMap(null);
}
if(tag==1) {
var sts=[{url:"/static/imgs/m1.png",size:new AMap.Size(56,56),offset:new AMap.Pixel(-16,-30)},
{url:"/static/imgs/m2.png",size:new AMap.Size(56,56),offset:new AMap.Pixel(-16,-30)},
{url:"/static/imgs/m3.png",size:new AMap.Size(60,60),offset:new AMap.Pixel(-24,-45)}];
map.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(map,markers,{styles:sts});
});
}
else {
map.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(map,markers);
});
}
}
4.响应房源点击事件的函数,展开信息窗体
1.把前面设置进marker的属性code的值拼接进url,
通过ajax请求数据,把数据传给打开信息窗体函数
function showInfo(e){
url = "/infor/" + e.target.code;
$.get(url,function (dat) {
data = dat;
fopen(data,e);
});
}
2.自定义信息窗体,打开位置为,marker的位置,内容为createInfoWindow(data)的返回值
function fopen(data,e) {
var infoWindow2 = new AMap.InfoWindow({
isCustom:true, //使用自定义窗体
content:createInfoWindow(data),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
});
infoWindow2.open(map,e.target.getPosition());
}
3.根据ajax的返回值,拼接信息窗体
// ------------------------------------------------
function createInfoWindow(data){
// console.log(data);
var price = data.price;
var more_href= data.more_href;
var img_src= data.img_src;
var info = document.createElement("div"); // 信息窗
info.className="information";
var image_box = document.createElement("div"); // 图片容器
image_box.className="imgbox";
var image = document.createElement("img"); // 图片
image.className="room_img";
image.src=img_src;
image.style.height="100%";
image.style.width="100%";
image_box.appendChild(image);
info.appendChild(image_box);
var x_box = document.createElement("div"); // x
x_box.className="x";
x_box.innerHTML="x";
x_box.onclick=closeInfoWindow;
info.appendChild(x_box);
var price_box = document.createElement("div"); // price
price_box.className="price";
price_box.innerHTML=price;
info.appendChild(price_box);
var more_box = document.createElement("a"); // more_href
more_box.target="_blank";
more_box.innerHTML="详情";
// more_box.className="more"
more_box.href=more_href;
info.appendChild(more_box);
return info;
}
4.为信息窗体的x图标添加点击事件,关闭信息窗
function closeInfoWindow(){
map.clearInfoWindow();
}