刚看了一篇帖子 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&[email protected]@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; //宽度不得小于800 if(yy<300)yy=300; //高度不得小于300 maplet.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&[email protected]@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=