Mapbar API 简单使用
刚看了一篇帖子 http://www.iteye.com/topic/566712
介绍关于地图API 正好近期做的也是地图，顺便拿出来分享一下
我调研的结果没有用Google了的地图，原因是因为速度问题，显示的时间比较长，再有功能没有必要用那么多
对于 地产 教育 商城 餐厅 等显示简单的功能足够了
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"/><title>地图标记</title><script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT="></script><script type="text/javascript">function $$(id){return document.getElementById(id);}//静态变量var cx=116.39087;var cy=39.91978;var cc="北京市";var marker = null; var maplet = null;var flag = false;function initMap(){maplet = new Maplet("mapbar");maplet.centerAndZoom(new MPoint(cx,cy),9);maplet.addControl(new MStandardControl());maplet.clickToCenter = false;$$("keyword").focus();}window.onload=function(){$$("cccity").innerHTML=cc;$$("city").value=cc;document.title=cc;initMap();resizemap();window.onresize=function(){resizemap();}}//自适应窗口大小function resizemap(){if(maplet){var xx=document.body.clientWidth;var yy=document.body.clientHeight-80;if(xx<800)xx=800;//宽度不得小于800if(yy<300)yy=300;//高度不得小于300maplet.resize(xx,yy);}}//点击监听var myEventListener;function add(){myEventListener = MEvent.addListener(maplet,"click",function(evt,point){if(flag) {maplet.clearOverlays();}if(!point) alert("获取经纬度失败，请刷新页面后重新操作。");//alert(point.lon,point.lat);$$("x").value = point.lon;$$("y").value = point.lat;marker = new MMarker(point,new MIcon("http://union.mapbar.com/apidoc/images/tb1.gif",32,32,18,32)); maplet.addOverlay(marker); marker.setEditable(false); flag = true;dells();//标记点后移除监听事件});}//移除监听，清空显示框function del(){maplet.clearOverlays();dells();$$("x").value='';$$("y").value='';}//移除监听function dells(){MEvent.removeListener(myEventListener);}//设置中心点function setCenter(x,y,z){maplet.centerAndZoom(new MPoint(x,y), z);}//显示中心点function getCenter(){var mPoint=maplet.getCenter();if($$("center")){$$("center").value=mPoint.lon+","+mPoint.lat+','+maplet.getZoomLevel();}else alert("中心点坐标:("+mPoint.lon+","+mPoint.lat+")"+maplet.getZoomLevel());}//查询mapbarfunction search(){var city = $$("city").value;var keyword = $$("keyword").value;if(keyword=="")keyword="故宫";var url = "http://www.mapbar.com/localsearch/index.jsp#ac=lc&keyword="+keyword+"&city="+city;var newWin = window.open(url,'newwindow');newWin.focus();}</script></head><body style="padding:0px;margin:0px;"><div align=center ><div style="float:left; margin-left:10px; margin-top:15px; margin-bottom:10px;"><input type="button" value="添加" onclick="add()" style="padding:7px; "><input type="button" value="删除" onclick="del()" style="padding:7px; "></div><div style="float:left; height:50px; margin-left:10px; margin-top:10px; margin-bottom:10px;"><table><tr><td>经度X：<input id="x" type="text" id='x'/></td></tr><tr><td>纬度Y：<input id="y" type="text" id='y'/></td></tr></table></div><div style="float:left; margin-top:20px;margin-left:10px;"><span><a href='#' onclick='javascript:setCenter(cx,cy,8)' id="cccity"></a></span></div><div style="float:left; margin-top:15px; margin-left:5px;"><input id="center"><br/><input type=button value='显示中心点' onclick="getCenter()"></div><div style="float:left; height:50px; margin-left:5px; margin-top:10px; margin-bottom:10px;"><table><form onsubmit="return false;"><tr><td>城市：<input id="city" value=""></td><td><font color="red" size="3">外部搜索</font></td></tr><tr><td>查询：<input id="keyword" ></td><td><input type=submit onsubmit="return false;" value='查询mapbar' onclick="search()"></td></tr></form></table></div><div id="mapbar" style="width:382px;height:340px;float:left;"></div></body></html>这个页面主要是用来标记点坐标，点“添加”-->然后点击地图就会返回点击位置的坐标
多余的功能是显示中心点坐标，可以在获取了新坐标后改变最上面的cx cy cc 就可以用于另一个城市了
中间的链接可以快速回到北京
因为使用的是Mapbar的api，地点查询功能属于付费项目，暂时用不到，就直接使用外部链接跳转的方式用来查找详细坐标
-------------------2011-12-21----------------------
发现api更新了以后地图无法使用，原来是key变更了...（附件中的key自己修改吧）
http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=