通過(guò)mapabc的地圖api實(shí)現(xiàn)地圖標(biāo)注(二)
顯示地圖標(biāo)注信息，知道地圖的大小及范圍，讓在其范圍內(nèi)的點(diǎn)顯示出來(lái)即可。另外還要實(shí)現(xiàn)一些簡(jiǎn)單的搜索功能。一個(gè)簡(jiǎn)單的地圖搜房就出來(lái)了。
有了思路做起來(lái)就快了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>快速顯示地圖 </title>
<style>
body{ padding:0; margin:0;}
</style>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.4&key={key}"></script>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mapObj = null;
function mapInit() {
var mapoption = new MMapOptions();
mapoption.toolbar = MConstants.DEFAULT;
mapoption.overviewMap = MConstants.SHOW;
mapoption.scale = MConstants.HIDE;
mapoption.zoom = 13;
mapoption.center = new MLngLat(120.301924, 31.582009);
mapoption.language = MConstants.MAP_CN;
mapoption.fullScreenButton = MConstants.HIDE;
mapoption.centerCross = MConstants.SHOW;
mapoption.toolbarPos = new MPoint(20, 20);
mapoption.mapComButton = MConstants.SHOW_NO;
mapObj = new MMap("map", mapoption);
mapObj.addEventListener(mapObj, MConstants.MAP_READY, endDrag);//地圖加載完畢后觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.DRAG_END, endDrag);//鼠標(biāo)拖動(dòng)觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.ZOOM_CHANGED, endDrag);//地圖修改縮放大小后觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.MAP_MOVE_END, endDrag);//地圖移動(dòng)結(jié)束后觸發(fā)事件
}
function endDrag(param) {
getBounds();//得到地圖的西南角坐標(biāo)，東北角坐標(biāo)
}
function getBounds() {
var bounds = mapObj.getLngLatBounds();
//利用ajax調(diào)取后臺(tái)數(shù)據(jù)庫(kù)的坐標(biāo)信息及顯示于前臺(tái)的樓盤信息
$.ajax({
type: "GET",
url: "/ajax/housemap.aspx",
data: "smapx=" + bounds.southWest.lngX + "&smapy=" + bounds.southWest.latY + "&nmapx=" + bounds.northEast.lngX + "&nmapy=" + bounds.northEast.latY + "&name=" + $("#search").val() + "&quyu=" + $("#quyu").val() + "&price=" + $("#price").val(),
dataType: "html",
success: function (html) {
addMarkers(html);
addRights(html);
$("#suiji").empty();
$("#suiji").append("smapx=" + bounds.southWest.lngX + "&smapy=" + bounds.southWest.latY + "&nmapx=" + bounds.northEast.lngX + "&nmapy=" + bounds.northEast.latY + "&name=" + $("#search").val() + "&quyu=" + $("#quyu").val() + "&price=" + $("#price").val());
}
});
}
function addRights(list) {
var arrlist = list.split("|");
$("#right").empty();
for (i = 0; i < arrlist.length; i++) {
var cc = arrlist[i];
var cclist = cc.split(",");
var sContent = "<li><font color='#ff0000'>" + cclist[0] + "</font><br />";
//sContent += "開盤日期:" + cclist[1] + "<br />";
sContent += "均價(jià):" + cclist[1] + " 元/平方米<br />";
sContent += "電話:" + cclist[2] + "<br />";
sContent += "地址:" + cclist[7] + "<br />";
sContent += "</li>";
$("#right").append(sContent);
}
}
function addMarkers(list) {
mapObj.removeOverlaysByType(MOverlay.TYPE_MARKER);
var arrlist = list.split("|");
//alert(arrlist.length);
var Mmarker;
var marker;
var souest;
var norEast;
var lngX1;
var latY1;
var markerArr = new Array();
$("#zuobiao").empty();
$("#suiji").empty();
for (i = 0; i < arrlist.length; i++) {
var cc = arrlist[i];
var cclist = cc.split(",");
var markerOption = new MMarkerOptions();
var tipOption = new MTipOptions();
var sContent = "<font color='#ff0000'>" + cclist[0] + "</font>【<a href='http://house.efw.cn/house/nh-" + cclist[8] + "-list.html'>查看詳細(xì)信息</a>】<br />";
//sContent += "開盤日期:" + cclist[1] + "<br />";
sContent += "均價(jià):" + cclist[1] + " 元/平方米<br />";
sContent += "電話:" + cclist[2] + "<br />";
sContent += "地址:" + cclist[7] + "<br />";
sContent += "<img src='" + cclist[3] + "' width='120' height='90' />";
var fontstyle = new MFontStyle();
fontstyle.size = 14;
fontstyle.color = 0xFFFFFF;
var fillstyle = new MFillStyle();
fillstyle.color = 0x145697;
tipOption.title = "樓盤信息";
tipOption.titleFontStyle = fontstyle;
tipOption.titleFillStyle = fillstyle;
tipOption.content = sContent;
tipOption.tipType = MConstants.HTML_BUBBLE_TIP;
markerOption.imageUrl = "http://api.mapabc.com/flashmap/res/exlabel.swf?swfp=" + cclist[0] + "|12|0x046788|1|0xFFFFFF|0x046788"; //小旗
markerOption.picAgent = false;
markerOption.tipOption = tipOption;
markerOption.canShowTip = true;
markerOption.hasShadow = false;
var ll = new MLngLat(cclist[5], cclist[6]);
var Mmarker = new MMarker(ll, markerOption);
Mmarker.id = i + 1;
markerArr.push(Mmarker);
}
mapObj.addOverlays(markerArr, false);
mapObj.removeEventListener(mapObj, MConstants.MAP_MOVE_END, endDrag);
}
function searchname() {
$("#map").children().remove();
mapInit();
}
function changemap() {
$("#map").children().remove();
mapInit();
}
</script>
</head>
<body onload="mapInit();">
<table width=1000>
<tr>
<td>
<select id="quyu" onChange="searchname()">
<option value="">選擇區(qū)域</option>
<option id="apf_id_10_select_area_1" value="濱湖區(qū)">濱湖區(qū)</option>
<option id="apf_id_10_select_area_2" value="惠山區(qū)">惠山區(qū)</option>
<option id="apf_id_10_select_area_3" value="錫山區(qū)">錫山區(qū)</option>
<option id="apf_id_10_select_area_4" value="崇安區(qū)">崇安區(qū)</option>
<option id="apf_id_10_select_area_5" value="北塘區(qū)">北塘區(qū)</option>
<option id="apf_id_10_select_area_6" value="南長(zhǎng)區(qū)">南長(zhǎng)區(qū)</option>
<option id="apf_id_10_select_area_7" value="新區(qū)">新區(qū)</option>
<option id="apf_id_10_select_area_8" value="江陰">江陰</option>
<option id="apf_id_10_select_area_9" value="宜興">宜興</option>
</select>
<select id="price" onChange="searchname()" >
<option value="0,999999">均價(jià)不限</option>
<option value="0,5000">5000以下</option>
<option value="5001,8000">5000-8000</option>
<option value="8001,10000">8000-10000</option>
<option value="10001,12000">10000-12000</option>
<option value="12001,15000">12000-15000</option>
<option value="15001,18000">15000-18000</option>
<option value="18001,20000">18000-20000</option>
<option value="20000,999999">20000以上</option>
</select>
<input type=text name=search id=search /><input type=button name=bt id=bt value="搜索" onclick=searchname() /></td>
<td></td>
</tr>
<tr>
<td><div id="map" style="width:700px;height:400px"></div></td>
<td><div id="right" style=" float:left; width:300px;height:400px">
數(shù)據(jù)讀取中...
</div></td>
</tr>
</table>
<textarea id=zuobiao cols=80 rows=10 ></textarea><br />
<textarea id=suiji cols=80 rows=10 ></textarea>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>快速顯示地圖 </title>
<style>
body{ padding:0; margin:0;}
</style>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.4&key={key}"></script>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mapObj = null;
function mapInit() {
var mapoption = new MMapOptions();
mapoption.toolbar = MConstants.DEFAULT;
mapoption.overviewMap = MConstants.SHOW;
mapoption.scale = MConstants.HIDE;
mapoption.zoom = 13;
mapoption.center = new MLngLat(120.301924, 31.582009);
mapoption.language = MConstants.MAP_CN;
mapoption.fullScreenButton = MConstants.HIDE;
mapoption.centerCross = MConstants.SHOW;
mapoption.toolbarPos = new MPoint(20, 20);
mapoption.mapComButton = MConstants.SHOW_NO;
mapObj = new MMap("map", mapoption);
mapObj.addEventListener(mapObj, MConstants.MAP_READY, endDrag);//地圖加載完畢后觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.DRAG_END, endDrag);//鼠標(biāo)拖動(dòng)觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.ZOOM_CHANGED, endDrag);//地圖修改縮放大小后觸發(fā)事件
mapObj.addEventListener(mapObj, MConstants.MAP_MOVE_END, endDrag);//地圖移動(dòng)結(jié)束后觸發(fā)事件
}
function endDrag(param) {
getBounds();//得到地圖的西南角坐標(biāo)，東北角坐標(biāo)
}
function getBounds() {
var bounds = mapObj.getLngLatBounds();
//利用ajax調(diào)取后臺(tái)數(shù)據(jù)庫(kù)的坐標(biāo)信息及顯示于前臺(tái)的樓盤信息
$.ajax({
type: "GET",
url: "/ajax/housemap.aspx",
data: "smapx=" + bounds.southWest.lngX + "&smapy=" + bounds.southWest.latY + "&nmapx=" + bounds.northEast.lngX + "&nmapy=" + bounds.northEast.latY + "&name=" + $("#search").val() + "&quyu=" + $("#quyu").val() + "&price=" + $("#price").val(),
dataType: "html",
success: function (html) {
addMarkers(html);
addRights(html);
$("#suiji").empty();
$("#suiji").append("smapx=" + bounds.southWest.lngX + "&smapy=" + bounds.southWest.latY + "&nmapx=" + bounds.northEast.lngX + "&nmapy=" + bounds.northEast.latY + "&name=" + $("#search").val() + "&quyu=" + $("#quyu").val() + "&price=" + $("#price").val());
}
});
}
function addRights(list) {
var arrlist = list.split("|");
$("#right").empty();
for (i = 0; i < arrlist.length; i++) {
var cc = arrlist[i];
var cclist = cc.split(",");
var sContent = "<li><font color='#ff0000'>" + cclist[0] + "</font><br />";
//sContent += "開盤日期:" + cclist[1] + "<br />";
sContent += "均價(jià):" + cclist[1] + " 元/平方米<br />";
sContent += "電話:" + cclist[2] + "<br />";
sContent += "地址:" + cclist[7] + "<br />";
sContent += "</li>";
$("#right").append(sContent);
}
}
function addMarkers(list) {
mapObj.removeOverlaysByType(MOverlay.TYPE_MARKER);
var arrlist = list.split("|");
//alert(arrlist.length);
var Mmarker;
var marker;
var souest;
var norEast;
var lngX1;
var latY1;
var markerArr = new Array();
$("#zuobiao").empty();
$("#suiji").empty();
for (i = 0; i < arrlist.length; i++) {
var cc = arrlist[i];
var cclist = cc.split(",");
var markerOption = new MMarkerOptions();
var tipOption = new MTipOptions();
var sContent = "<font color='#ff0000'>" + cclist[0] + "</font>【<a href='http://house.efw.cn/house/nh-" + cclist[8] + "-list.html'>查看詳細(xì)信息</a>】<br />";
//sContent += "開盤日期:" + cclist[1] + "<br />";
sContent += "均價(jià):" + cclist[1] + " 元/平方米<br />";
sContent += "電話:" + cclist[2] + "<br />";
sContent += "地址:" + cclist[7] + "<br />";
sContent += "<img src='" + cclist[3] + "' width='120' height='90' />";
var fontstyle = new MFontStyle();
fontstyle.size = 14;
fontstyle.color = 0xFFFFFF;
var fillstyle = new MFillStyle();
fillstyle.color = 0x145697;
tipOption.title = "樓盤信息";
tipOption.titleFontStyle = fontstyle;
tipOption.titleFillStyle = fillstyle;
tipOption.content = sContent;
tipOption.tipType = MConstants.HTML_BUBBLE_TIP;
markerOption.imageUrl = "http://api.mapabc.com/flashmap/res/exlabel.swf?swfp=" + cclist[0] + "|12|0x046788|1|0xFFFFFF|0x046788"; //小旗
markerOption.picAgent = false;
markerOption.tipOption = tipOption;
markerOption.canShowTip = true;
markerOption.hasShadow = false;
var ll = new MLngLat(cclist[5], cclist[6]);
var Mmarker = new MMarker(ll, markerOption);
Mmarker.id = i + 1;
markerArr.push(Mmarker);
}
mapObj.addOverlays(markerArr, false);
mapObj.removeEventListener(mapObj, MConstants.MAP_MOVE_END, endDrag);
}
function searchname() {
$("#map").children().remove();
mapInit();
}
function changemap() {
$("#map").children().remove();
mapInit();
}
</script>
</head>
<body onload="mapInit();">
<table width=1000>
<tr>
<td>
<select id="quyu" onChange="searchname()">
<option value="">選擇區(qū)域</option>
<option id="apf_id_10_select_area_1" value="濱湖區(qū)">濱湖區(qū)</option>
<option id="apf_id_10_select_area_2" value="惠山區(qū)">惠山區(qū)</option>
<option id="apf_id_10_select_area_3" value="錫山區(qū)">錫山區(qū)</option>
<option id="apf_id_10_select_area_4" value="崇安區(qū)">崇安區(qū)</option>
<option id="apf_id_10_select_area_5" value="北塘區(qū)">北塘區(qū)</option>
<option id="apf_id_10_select_area_6" value="南長(zhǎng)區(qū)">南長(zhǎng)區(qū)</option>
<option id="apf_id_10_select_area_7" value="新區(qū)">新區(qū)</option>
<option id="apf_id_10_select_area_8" value="江陰">江陰</option>
<option id="apf_id_10_select_area_9" value="宜興">宜興</option>
</select>
<select id="price" onChange="searchname()" >
<option value="0,999999">均價(jià)不限</option>
<option value="0,5000">5000以下</option>
<option value="5001,8000">5000-8000</option>
<option value="8001,10000">8000-10000</option>
<option value="10001,12000">10000-12000</option>
<option value="12001,15000">12000-15000</option>
<option value="15001,18000">15000-18000</option>
<option value="18001,20000">18000-20000</option>
<option value="20000,999999">20000以上</option>
</select>
<input type=text name=search id=search /><input type=button name=bt id=bt value="搜索" onclick=searchname() /></td>
<td></td>
</tr>
<tr>
<td><div id="map" style="width:700px;height:400px"></div></td>
<td><div id="right" style=" float:left; width:300px;height:400px">
數(shù)據(jù)讀取中...
</div></td>
</tr>
</table>
<textarea id=zuobiao cols=80 rows=10 ></textarea><br />
<textarea id=suiji cols=80 rows=10 ></textarea>
</body>
</html>
浙公網(wǎng)安備 33010602011771號(hào)