查看: 4905|回复: 7

[问与答] 请教个问题,类似搜房网的功能,要求地图显示标记

[复制链接]
默默 发表于 2015-2-2 17:48:42 | 显示全部楼层 |阅读模式
问题具体是地图会显示标记点 但是在搜索的时候不跳转到该点,部分代码如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>出售信息电子地图-<%=SiteName%></title>
<link href="../style/global.css" rel="stylesheet" type="text/css" />
<link href="../esf/style/esf.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mapDiv{ width:960px; height:530px; padding:1px; background-color:#fff;}
.windows { text-align:left; border:solid 1px #4FA5FC; background:#fff; width:300px;}
.windows h2{ color:#F30; font-size:16px; font-weight:bold; margin:0px; padding:5px; line-height:26px;}
.windows h6 { font-size:14px; border-bottom:1px solid #ccc; padding:10px 0 2px 10px; position:relative;}
.windows h6 span { background:url(images/pic6.gif) -90px -95px no-repeat; padding:0 5px; position:absolute; right:0; top:10px;}
.windows h6 a { text-decoration:none; color:#f00;}
.windows dl { margin:0px; padding:0px; width:290px; padding:0px 5px; min-height:150px;}
.windows dt {margin:0px; padding:0px;  width:145px; float:right;}
.windows dd {margin:0px; padding:0px;  width:145px; float:left; line-height:18px;}
.windows p { padding-left:10px; clear:both;}
.windows p a { color:#f00; text-decoration:underline;}
.windows .l{float:left;}
.windows .r{float:right;}
.windows .bt{clear:both;}
</style>
<script type="text/javascript" src="../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<%=Map_Api%>"></script>
<script type="text/javascript" src="../map/js/TextIconOverlay.js"></script>
<script type="text/javascript" src="../map/js/MarkerClusterer.js"></script>
<script type="text/javascript" src="../map/js/InfoBox.js"></script>
<script type="text/javascript">        
function AreaChange(cid,tid,defaultval){

var childs=document.getElementById(tid);

childs.length=0;

childs.options[0]=new Option("...",0);

var opt = {

'url': '/member/get_area.asp?pid='+cid,

'dataType': 'xml',

'async':false,

'success': function (xml) {              //返回成功
          var city = xml.documentElement.getElementsByTagName("city");
        
for (var i = 0; i < city.length; i++) {

var id = city.getAttribute("id");

var tt = city.getAttribute("title");

var ofs=childs.length;

childs.options[ofs]=new Option(tt,id);


if(parseInt(id)==parseInt(defaultval)){

childs.options[ofs].selected=true;

}

}

},

'error': function () {                        //返回失败后

alert('Error loading XML document');

}

};

$.ajax(opt);

refreshMap();
}
var map =null;
var markers = [];
var pt = null;
var markerClusterer =null;
var infoBox=null;
var myStyles = [{

url: '/map/images/conv30.png',

size: new BMap.Size(30, 26),

opt_anchor: [16, 0],

textColor: '#ff00ff',

opt_textSize: 10
}, {

url: '/map/images/conv40.png',

size: new BMap.Size(40, 35),

opt_anchor: [40, 35],

textColor: '#ff0000',

opt_textSize: 12
}, {

url: '/map/images/conv50.png',

size: new BMap.Size(50, 44),

opt_anchor: [32, 0],

textColor: 'white',

opt_textSize: 14
}];
function initialize() {


map=new BMap.Map("mapDiv");

map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件

map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件

map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

map.addControl(new BMap.MapTypeControl());          //添加地图类型控件

map.enableScrollWheelZoom();

map.addEventListener("dragend",function(){

refreshMap();

});

map.addEventListener("zoomend",function(){

refreshMap();

});

var markers = [];

var infowidows=[];

var myGeo = new BMap.Geocoder();

myGeo.getPoint("<%=CityName_Cn%>", function(point){

if (point) {

map.centerAndZoom(point,15);


}

}, "全国");


}

function refreshMap() {

///////////////

deleteOverlays();

infoBox = new BMapLib.InfoBox(map,'',{

boxStyle:{

background:"url('/map/images/tipbox.gif') no-repeat center top"

,width: "300px"

,height: "180px"

}

,closeIconUrl:"/map/images/close.png"

,closeIconMargin: "190px 1px 0px 0px"

,enableAutoPan: true

,align: INFOBOX_AT_TOP

});

var f_area=$('#f_area').val();

var f_district=$('#f_district').val();


var f_price=$('#f_price').val();


var f_pubby=$('#f_pubby').val();

var f_rooms_sleeping=$('#f_rooms_sleeping').val();

var f_house_type=$('#f_house_type').val();

var f_square=$('#f_square').val();

var get_url="data_get.asp?f_area="+f_area+"&f_district="+f_district;

if(f_price!=''){


var f_arr=f_price.split('-');

get_url+="&f_priceS="+f_arr[0]+"&f_priceE="+f_arr[1];

}

if(f_square!=''){


var f_arrs=f_square.split('-');

get_url+="&f_mjs="+f_arrs[0]+"&f_mje="+f_arrs[1];

}

get_url+="&f_pubby="+f_pubby+"&f_rooms_sleeping="+f_rooms_sleeping+"&f_house_type="+f_house_type;


var bounds = map.getBounds(), sw= bounds.getSouthWest(), ne= bounds.getNorthEast();

if(sw!=null){

var querypoint=sw.lat+','+sw.lng+','+ne.lat+','+ne.lng

get_url+="&bounds="+querypoint;

}

//$('#status').html(get_url);

$.get(get_url, function(data) {

var xml= data.documentElement;

var house = xml?xml.getElementsByTagName("house"):[];

for (var i = 0; i < house.length; i++) {


pt = new BMap.Point(parseFloat(house.getAttribute("lng")),parseFloat(house.getAttribute("lat")));

var marker=new BMap.Marker(pt)

markers.push(marker);


addInfoWin(marker,house);


}

markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

});
}  


function addInfoWin(marker,h){

var id=h.getAttribute("id");


marker.addEventListener("click", function(){      

$.get('/sale/data_show.asp?id='+id, function(data) {

var xml= data.documentElement;

var ihtm = [];

var house = xml?xml.getElementsByTagName("house"):[];

if(house!=null){

var hh=house[0];

ihtm.push('<div class="windows">');

ihtm.push('<h2>'+hh.getAttribute("address")+'</h2>');


ihtm.push('<dl><dt><img src="'+hh.getAttribute("photo")+'" width="140" height="120" /></dt>');


ihtm.push('<dd>价格:'+hh.getAttribute("price")+'¥<br />');


ihtm.push('户型:'+hh.getAttribute("huxing")+'<br />');


ihtm.push('楼层:'+hh.getAttribute("floor")+'<br />');


ihtm.push('面积:'+hh.getAttribute("square")+'<br />');


ihtm.push('年代:'+hh.getAttribute("houseyear")+'</dd>');


ihtm.push('</dl>');


ihtm.push('<p><a target="_blank" href="/sale/show.asp?id='+id+'">详细信息</a></p>');


ihtm.push('</div>');



//

infoBox.open(marker);

infoBox.setContent(ihtm.join(""));

}

});


});

}

function deleteOverlays(){

if(markerClusterer!=null){

markerClusterer.removeMarkers(markers);

}
}
</script>
</head>

<body>
<!--#include file="../templet/head.htm"-->
<!--#include file="../esf/nav.htm"-->
<script type="text/javascript">
$('#n_map').addClass('on');
</script>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        <a href="/sale/map.asp" class="btn_on">出售</a>
        <a href="/rent/map.asp" class="btn_off">出租</a>      
        <a href="/zj/map.asp" class="btn_off">中介</a>  
        </td>
      </tr>
      <tr>
        <td height="3" bgcolor="#FE833F"></td>
      </tr>
    </table>

<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="45" align="center"><img src="../map/images/dt_f.gif" width="38" height="36" align="absmiddle" /></td>
    <td align="center"><form action="" method="get">
       地区:
      <select name="f_area" id="f_area">
        <option value="0">...</option>
        <%=GetAreaSelect(CityID_Default,0)%>
      </select>
      <select name="f_district" id="f_district">
        <option value="0">...</option>
      </select>
      价格:
  <select name="f_price" id="f_price">
    <option value="" selected="selected">售价不限</option>
    <option value="0-300000">¥30万以下</option>
    <option value="300000-400000">¥30万-¥40万</option>
    <option value="400000-500000">¥40万-¥50万</option>
    <option value="500000-600000">¥50万-¥60万</option>
    <option value="600000-800000">¥60万-¥80万</option>
    <option value="800000-1000000">¥80万-¥100万</option>
    <option value="1000000-1500000">¥100万-¥150万</option>
    <option value="1500000-10000000">¥150万以上</option>
  </select>
      面积:
  <select name="f_square" id="f_square">
    <option value="" selected="selected">面积不限</option>
    <option value="0-50">50平以下</option>
    <option value="50-70">50平-70平</option>
    <option value="70-90">70平-90平</option>
    <option value="90-120">90平-120平</option>
    <option value="120-150">120平-150平</option>
    <option value="150-200">150平-200平</option>
    <option value="200-10000">200平以上</option>
  </select>
      发布:
  <select name="f_pubby" id="f_pubby">
    <option value="-1" selected="selected">不限</option>
    <option value="1">经纪人</option>
    <option value="0">个人</option>
  </select>
      室:
  <select name="f_rooms_sleeping" id="f_rooms_sleeping">
    <option value="0" selected="selected">...</option>
    <%=GetOptioNums(10,0)%>
  </select>
      类型:
  <select name="f_house_type" id="f_house_type">
    <option value="0" selected="selected">...</option>
    <%=GetResourceSelect("t_rent_house_type",0)%>
  </select>
   
 楼主| 默默 发表于 2015-2-2 17:49:27 | 显示全部楼层
请教一下问题。。有木有大神
ttasp 发表于 2015-2-2 19:44:03 | 显示全部楼层
请教一下问题。。有木有大神
默默 发表于 2015-2-2 17:49


把完整代码打包,私信我网盘链接 或者发客服邮箱
 楼主| 默默 发表于 2015-2-3 09:25:12 | 显示全部楼层
回复 3# ttasp


   您好 发了私信 不知道发的对不对 麻烦您看一下
ttasp 发表于 2015-2-3 09:29:29 | 显示全部楼层
回复  ttasp


   您好 发了私信 不知道发的对不对 麻烦您看一下
默默 发表于 2015-2-3 09:25


1.jpg 建议程序文件完整打包,给我网盘下载地址就行
 楼主| 默默 发表于 2015-2-3 09:36:15 | 显示全部楼层
回复 5# ttasp


   您好 我不会弄网盘。。打包发送客服邮箱了   不是源码但是相当类似了 地图刷新功能基本一样 因为源码我下不到。。不好意思
ttasp 发表于 2015-2-3 09:41:38 | 显示全部楼层
回复  ttasp


   您好 我不会弄网盘。。打包发送客服邮箱了   不是源码但是相当类似了 地图刷新功能基 ...
默默 发表于 2015-2-3 09:36


好的 具体你也可以直接咨询客服
 楼主| 默默 发表于 2015-2-3 09:52:23 | 显示全部楼层
回复 7# ttasp


   好的 谢谢
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号