编程论坛 » ASP技术论坛 » 地图l拉框选房数据库如何建立

SMR888 发表于 2008-7-20 10:46

地图l拉框选房数据库如何建立

紧急求助：我在做一房产中介网站，要建一房源数据库，在地图上感兴趣位置拉框选房，之后即显示框中位置的租房及售房信息，
http://bj.homev.cn/rent/MapSearch.aspx   http://hz.5i5j.com/map/index.action  这二家网站做得很不错，但我不会，请
高手帮忙，重金酬谢，QQ:617744745  电话：13776855115

multiple1902 发表于 2008-7-20 12:30

如果你对这个技术感兴趣，你可以右键查看源代码，毕竟这样是最直接的。

比较关键的是这些js脚本：
http://lib.homev.cn/map/map.js
http://vipapi.51ditu.com/js/maps.js
http://vipapi.51ditu.com/js/ajax.js
http://vipapi.51ditu.com/js/maps_api.js
http://vipapi.51ditu.com/place/place_maps.js
[code]
var g_XMLHTTP = null;
var g_fullURL = "";
var maps;
var api_url = "MapSearchAjax.aspx"; //查找动态页，设置二手房、租房等查找地址
var lx,sx,ly,sy,RentNum;
var control;
var kk=2;
otherlist="";
var RentType=-1;
var RentValue=0;
//拉框结束执行的查找操作
function doit(bounds)
{
        otherlist="";
        maps.clearOverLays();//去掉所有的标注
        //document.getElementById("decr").style.display='none';//隐藏提示层
        lx=bounds.getXmax();
        sx=bounds.getXmin();
        ly=bounds.getYmax();
        sy=bounds.getYmin();
    RentType=document.getElementById("zfRentType").value;
    RentValue=document.getElementById("zfRentValue").value;
    RentNum=document.getElementById("zfRentNum").value;
        if(RentType!="")
                otherlist+="&RentType="+RentType;
    if(RentValue!="")
                otherlist+="&RentValue="+RentValue;
    if(RentNum!="")
                otherlist+="&RentNum="+RentNum;
    //发布时间
    var RentDays=document.getElementById("RentDays").value;
        if(RentDays!=0)
                otherlist+="&Days="+RentDays;                               
        search_map(bounds.getXmax(),bounds.getXmin(),bounds.getYmax(),bounds.getYmin(),1,otherlist)
        startit(document.getElementById("Map_Btnimg"));
}
//设置点击按钮的操作。切换点击按钮的html
function startit(obj)
{
        if(obj.src.toLowerCase().indexOf('startsearch.gif') != -1)
                obj.src="images/endsearch.gif";
        else
                obj.src="images/startsearch.gif";
        control.btnClick();
}
//初始化地图
function initMap()
{
        maps = new LTMaps("mapDiv");//指定地图放到那个层
        maps.cityNameAndZoom( CurrentCity  , 6 );//设置中心
        maps.handleKeyboard(); //键盘操作支持
        maps.handleMouseScroll();//鼠标滚轮支持

        maps.addControl(new LTStandMapControl());
        control = new LTZoomSearchControl();        //建立新的拉框查找控件
        maps.addControl(control);                        //添加控件到地图
        control.setVisible(false);//隐藏拉框控件按钮
        var div=document.createElement("DIV");
    div.style["position"]="absolute";;
    div.style["zIndex"]="100000";
    div.innerHTML='<img src="images/startsearch.gif" id="Map_Btnimg" style="cursor:pointer" onclick="startit(this);"/>';
        var HEC = new LTHtmlElementControl(div);
        HEC.setRight("15px");
        HEC.setTop("15px");
        maps.addControl(HEC);
        LTEvent.addListener(control,"mouseup",doit);        //设置在用户拉框完成之后执行do
}
//设置鼠标经过标注时显示信息浮窗，离开时关闭浮窗
function openInfoWin(marker,html,title)
{
        return function(){
        var win= this.openInfoWinHtml( html );
        win.setTitle(title);
        win.moveToShow();
        //win.closeInfoWindowWithMouse();        //定义在鼠标移出时关闭信息浮窗
        }
}
//拉框查找
var errmsg;
var ppp;
//查找地图
//参数说明lx： x最大 sx：x最小,ly：y最大,sy：y最小,index：页码
function search_map(lx,sx,ly,sy,index,other)
{
        sendRequest(setPatchPoi,api_url+"?lx="+lx+"&sx="+sx+"&ly="+ly+"&sy="+sy+"&p="+index+other);
        otherlist=other;
        //errmsg="/map/SearchMap.aspx?lx="+lx+"&sx="+sx+"&ly="+ly+"&sy="+sy+"&p="+index;
        ppp=index;
}
function search_map1(lx1,sx1,ly1,sy1,index,other)
{
        if(kk==1)
        {
            sendRequest(setPatchPoi,api_url+"?lx="+lx1+"&sx="+sx1+"&ly="+ly1+"&sy="+sy1+"&p="+index+other);
            otherlist=other;
            //errmsg="/map/SearchMap.aspx?lx="+lx+"&sx="+sx+"&ly="+ly+"&sy="+sy+"&p="+index;
            lx=lx1;
            ly=ly1;
            sx=sx1;
            sy=sy1;
            ppp=index;
            kk=2;
        }
}

var html=[];
var title=[];
var points=[];
var marknumber;
for(var iiii=0;iiii<20;iiii++)
{
        eval(" var marker"+iiii+"; ")
}
//批量在地图上添加找到的标注
function setPatchPoi(pois)
{
        maps.clearOverLays();//去掉所有的标注       
        var arrydate0 = pois.split("*%&^");//先分割出
        document.getElementById("resultlist").innerHTML=arrydate0[1];
       
        points=[];//清空后填充
        var arrydate = arrydate0[0].split("{$}");//先分割出
        if(maps==null)
                alert("没有地图");
       
        var x=[];
        var y=[];

        icon1 = new LTIcon();
        //再次分割并且初始化标注点
        marknumber=arrydate.length;
        for(var i=0;i<arrydate.length-1;i++)
        {
                var temparry=arrydate[i].split(",");
                 //租房
                x[i] = temparry[0];
                y[i] = temparry[1];
                html[i]= "<p><a href='detail.aspx?ID="+temparry[3]+"' target='_blank'>"+temparry[7]+"</a></p><p>"+temparry[4]+"元/月</p><p>类型："+temparry[5]+"</p>";
                title[i]="<font style='font-size:12px'>"+temparry[2]+"（<a href='detail.aspx?ID="+temparry[3]+"' target='_blank'>查看详情</a>）</font>";
                icon1.setImageUrl("images/Mark_Company.gif");
                points.push(new LTPoint( parseInt(x[i]) , parseInt(y[i]) ));
                eval(" marker"+i+" = new LTMarker( points["+i+"] ,icon1);");
                eval("maps.addOverLay( marker"+i+" ); ");
                eval("LTEvent.addListener( marker"+i+" , \"mouseover\" ,openInfoWin(marker"+i+",html["+i+"],title["+i+"]));");
        }       
        //同时把查找条件发送到iframe中，实现翻页
        maps.getBestMap(points);//将地图定位到最佳视图
}
//当没有结果的时候清掉之前的结果
function clearresult()
{
        document.getElementById("resultlist").innerHTML='<h2 style="margin-left:370px;margin-top:30px">暂无搜索结果</h2>';
}
//滑动实现地图中心移动到标注位置。
function gotocenter(i)
{
        maps.moveToCenter(points[i]);//滑动实现地图中心移动到标注位置。
        eval("var infoWin=marker"+i+".openInfoWinHtml(html["+i+"]);");        //在该标记上显示一个信息浮窗
        eval("infoWin.setTitle(title["+i+"]);")        //设置该信息浮窗的标题内容
        window.scrollTo(0,246);
}
function getXMLHTTPRequest() {
        if (g_XMLHTTP)
        {
                g_XMLHTTP = null;
        }
        try
        {
                g_XMLHTTP = new ActiveXObject("Msxml2.xmlhttp");
        }
        catch (e)
        {
                try
                {
                        g_XMLHTTP = new ActiveXObject("Mcrosoft.xmlhttp");
                }
                catch (e2)
                {
                        g_XMLHTTP = false;
                }
        }
        if (!g_XMLHTTP && typeof XMLHttpRequest != "undefined")
        {
                try
                {
                        g_XMLHTTP = new XMLHttpRequest();
                }
                catch (e)
                {
                        g_XMLHTTP = false;
                }
        }
}
var data ;
function sendRequest(callback,url){
        getXMLHTTPRequest();
        var bakresult=document.getElementById("result");
        if(document.getElementById("rentmapfinally").style.display=="none")
            document.getElementById("rentmapfinally").style.display="";
        if (g_XMLHTTP){
                g_XMLHTTP.open("GET",url,true);
                g_XMLHTTP.setRequestHeader("Content-Type","text/html;charset=gbk");
                g_XMLHTTP.setRequestHeader("Cache-Control","no-store, no-cache, must-revalidate");
                g_XMLHTTP.onreadystatechange = function()
                {
                        if(g_XMLHTTP.readyState == 1)
                        {
                                bakresult.style.display="";
                                bakresult.innerHTML="<img src=\"images/map/load01.gif\" />正在加载";
                        }
                        if(g_XMLHTTP.readyState == 2|| g_XMLHTTP.readyState==3)
                        {
                                bakresult.style.display="";
                                bakresult.innerHTML="<img src=\"images/map/load01.gif\" />正在搜索";
                        }                       
                        if (g_XMLHTTP.readyState == 4)
                        {
                                if (g_XMLHTTP.status == 200)
                                {
                                        data=g_XMLHTTP.responseText;
                                        if (data == "-1")
                                        {
                                                bakresult.innerHTML="搜索条件为空";
                                                clearresult();
                                                return false;
                                        }
                                        if (data == "-2")
                                        {
                                                bakresult.innerHTML="没有符合条件的结果";
                                                clearresult();
                                                return false;
                                        }
                                        if (data == "-3")
                                        {
                                                bakresult.innerHTML="服务器繁忙";
                                                clearresult();
                                                return false;
                                        }
                                        bakresult.innerHTML="<img src=\"images/map/load01.gif\" />正在处理";
                                        callback(data);
                                        bakresult.style.display="none";
                                        data = "";
                                }
                                else
                                {
                                        bakresult.innerHTML="取出内容时出错";
                                        clearresult();
                                }
                        }
                }
                g_XMLHTTP.send(null);
                return true;
        }
        else
        {
                alert("建立对象出错");
        }
        return false;
}
[/code]

至于服务器的程序应该就是比较简单的了，看客户端发送了什么条件过去查找记录按照格式返回即可。

查看完整版本: 地图l拉框选房数据库如何建立