地图abc_01 _Web前端

mapabc_01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>中心点关键字周边搜索</title>
 <script type="text/javascript" src="http://app.mapabc.com/apis?&t=ajaxmap&v=2.1.2&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3|29e8ed1f7f6a97d8e99fc568cea6a7dc0ccd920856e07c0718b9885faf7551a18141699c81f526d7"></script>
<script type="text/javascript">
var mapObj=null;
function mapInit() {
	var mapOptions = new MMapOptions();//构建地图辅助类
	mapOptions.zoom=13;//要加载的地图的缩放级别
	mapOptions.center=new MLngLat(116.397428,39.90923);//要加载的地图的中心点经纬度坐标
	mapOptions.toolbar = DEFAULT;//设置地图初始化工具条
	mapOptions.toolbarPos = new MPoint(15,15); //设置工具条在地图上的显示位置
	mapOptions.overviewMap = SHOW; //设置鹰眼地图的状态，SHOW:显示，HIDE:隐藏（默认）
	mapOptions.scale = SHOW; //设置地图初始化比例尺状态，SHOW:显示（默认），HIDE:隐藏。
	mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回数字坐标
	mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。
	mapObj=new MMap("map",mapOptions); //地图初始化

	var lonLatJson = '{ "LonLat":[{x:116.3054101447,y:39.90923},{x:115.3054101447,y:39.90923},{x:114.3054101447,y:39.90923}]}';

	var lonLatList = eval('('+lonLatJson+')');
	var list = lonLatList.LonLat;

	var Mmarker = new Array();

	for(var i = 0 ; i < list.length ; i++){
		var markerOption = new MMarkerOptions();
		markerOption.imageUrl ="http://code.mapabc.com/images/apin/lan_"+(i+1)+".png";
	/*  
	    //创建一个信息窗口选项对象（这个对象可以应用在MMarker,MPolyline,MArea上）
		var tipOption = new MTipOptions();
		tipOption.title= "标题:" + (i+1);
		tipOption.content= "x:"+list[i].x + "," + "y:" + list[i].y;   //tip内容
		tipOption.hasShadow=true;
		tipOption.borderStyle.thickness=2;
		tipOption.borderStyle.color= 0x005cb5;
		tipOption.borderStyle.alpha=1;
		tipOption.titleFontStyle.name="Arial";
		tipOption.titleFontStyle.size=12;
		tipOption.titleFontStyle.color= 0xffffff;
		tipOption.titleFontStyle.bold=true;
		tipOption.contentFontStyle.name="Arial";
		tipOption.contentFontStyle.size=13;
		tipOption.contentFontStyle.color= 0x000000 ;
		tipOption.contentFontStyle.bold=false;
		tipOption.fillStyle.color= 0xFFFFFF; //填充色
		tipOption.fillStyle.alpha=1;
		tipOption.titleFillStyle.color=0x005cb5;
		tipOption.titleFillStyle.alpha=1;

		//添加到markerOption上
		markerOption.tipOption = tipOption;
		markerOption.canShowTip=true;
		markerOption.hasShadow=true;*/
		var ll = new MLngLat(list[i].x,list[i].y);
		
		Mmarker[i] = new MMarker(ll,markerOption);
		Mmarker[i].id=(i);
	}
	mapObj.addOverlays(Mmarker,true);
}

</script>
</head>
<body onload="mapInit();">
<table width="989"  border="0" cellpadding="0" cellspacing="2" bgcolor="#DDDDDD">
	<tr height="100%">
		<td rowspan="2" style="width:750px;height:600px;"><div id="map" style="height:600px; width:750px"></div></td>
		<td style="width:247px;border-left:1px solid #666;" valign="top" >
		<div style="padding:5px 0px 0px 5px;font-size:12px;height:290px">
			<div>中心点关键字周边搜索<br />城　市：<input type="text" id="city" name="city" value="010" /><br />关键字：<input type="text" id="keyword" name="keyword" value="酒店"/><br />中心关键字：<input type="text" id="CentKeyword" value="大恒科技大厦"/><br /><input type="button" value="查询" onclick="keywordSearch()" style="margin-left:100px"/></div>
			<div id="result" name="result" style="height:482px;overflow:auto;width:247px;margin-top:5px"></div>
	   </div></td>
   </tr>
</table>
</body>
</html>