Python + 高德JS——房源可视化(七)：JS部分

载入房源信息

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();
    }