javascript+mapbar實現地圖定位

更新時間：2010年04月09日 13:13:52 作者：

地圖定位圖吧地圖定位附javascript源碼每行都有注釋

本文地圖使用的是圖地圖
圖吧地圖在線API地址
http://union.mapbar.com/apidoc/
離線CHM格式下載地址:
http://union.mapbar.com/apidoc/chm/mapbarapi.rar

效果圖:

Mapbar 地圖 API 讓您可以使用 JavaScript 將 Mapbar地圖嵌入您自己的網頁中。API 提供了許多方法與地圖交互（正如http://www.mapbar.com/localsearch/index.html 網頁上顯示的），以及一系列向地圖添加內容的服務，從而使您可以在自己的網站上創(chuàng)建穩(wěn)定的地圖應用程序。
公共測試密鑰：

復制代碼代碼如下:

 
http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT= 

如果您想試試 Mapbar 地圖，省略申請密鑰的步驟，可以使用公共測試密鑰在本地（http://localhost）進行測試。
Internet Explorer 8.0 版本中存在兼容問題，需要在網頁 <head> 標簽間增加 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 標簽以保證地圖折線功能正確執(zhí)行。
這里只有前臺部分源碼
你需要在你的項目中ajax來實現定位持久化
代碼如下

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 地圖測試 </title> 
<script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></script> 
<script type="text/javascript"> 
var maplet=null;//地圖對象 
var marker=null;//標記對象 
var le=null;//縮放級別 
var myEventListener=null;//地圖click事件句柄 
function initMap()//初始化函數 
{ //轉帖請注明出處 http://Qbit.cnblogs.com 
le=10; //默認縮放級別 
maplet = new Maplet("mapbar"); 
//這里可以初始化地圖坐標比如從數據庫中讀取 然后在頁面上使用小腳本的形式 
//如: maplet.centerAndZoom(new MPoint(<%=維度%>, <%=經度%>),<%=縮放級別%>); 
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地圖中心點坐標并設定縮放級別 
maplet.addControl(new MStandardControl()); 
} 
function setp() 
{ 
if (marker)//判定是否已經添加標記 
{ 
alert("已經添加過標記了"); 
return; 
} 
maplet.setMode("bookmark");//設定為添加標記模式 
maplet.setCursorIcon("tb1.gif"); //添加鼠標跟隨標簽 
myEventListener = MEvent.bind(maplet, "click", this, addp); //注冊click事件句柄 
} 
//這里的參數要寫全即使你不使用event 
function addp(event,point){ 
if(!marker){ 
marker = new MMarker( point, //坐標 
new MIcon("mark.gif", 24, 24),//標簽ICO(圖片,大小) 
new MInfoWindow("蔡瑞福莊河市", "史上最佳"),//標注對象 
new MLabel("蔡瑞福")//小標簽 
); 
marker.bEditable=true; 
marker.dragAnimation=true; 
maplet.addOverlay(marker);//添加標注 
marker.setEditable(true); //設定標注編輯狀態(tài) 
maplet.setMode("pan"); //設定地圖為拖動(正常)狀態(tài) 
le= maplet.getZoomLevel(); //獲取當前縮放級別 
document.getElementById("findp").style.display="block"; 
document.getElementById("delp").style.display="block"; 
document.getElementById("savep").style.display="block"; 
MEvent.removeListener(myEventListener);//注銷事件 
} 
} 
//查找標記 
function find(){ 
maplet.centerAndZoom(marker.pt, le);//定位標記 
} 
//移除所有標記 
function del(){ 
//移除已經設定的坐標 
maplet.clearOverlays(true); 
location.reload(); //在重新添加的時候有點bug 我這里是直接刷新頁面 來重置 
/*document.getElementById("findp").style.display="none"; 
document.getElementById("delp").style.display="none"; 
document.getElementById("savep").style.display="none"; 
maplet=null; 
marker=null; 
myEventListener=null; 
initMap();*/ 
} 
//提取標記數據 
function savep() 
{ 
alert("當前坐標點\n經度:"+marker.pt.lon+"\n維度:"+marker.pt.lat+"\n縮放級別:"+le); 
} 
</script> 
</head> 
<body onload="initMap()"> 
<table width="501"> 
<tr><td><input type="button" value="添加標注" onclick="setp()"/></td> 
<td><input type="button" id="findp" value="查看標記" style="display:none;" onclick="find()"/></td> 
<td><input type="button" id="delp" value="刪除標記" style="display:none;" onclick="del()"/></td> 
<td><input type="button" id="savep" value="保存" style="display:none;" onclick="savep()"/></td> 
</tr> 
<tr><td colspan="4"><div id="mapbar" style="width:500px;height:300px"></div> 
</td></tr> 
</table> 
</body> 
</html> 