快捷導(dǎo)航

javascript+mapbar實(shí)現(xiàn)地圖定位

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

地圖定位圖吧地圖定位附j(luò)avascript源碼每行都有注釋

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

效果圖:

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
<!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> 地圖測(cè)試 </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;//地圖對(duì)象 
var marker=null;//標(biāo)記對(duì)象 
var le=null;//縮放級(jí)別 
var myEventListener=null;//地圖click事件句柄 
function initMap()//初始化函數(shù) 
{ //轉(zhuǎn)帖請(qǐng)注明出處 http://Qbit.cnblogs.com 
le=10; //默認(rèn)縮放級(jí)別 
maplet = new Maplet("mapbar"); 
//這里可以初始化地圖坐標(biāo)比如從數(shù)據(jù)庫(kù)中讀取 然后在頁(yè)面上使用小腳本的形式 
//如: maplet.centerAndZoom(new MPoint(<%=維度%>, <%=經(jīng)度%>),<%=縮放級(jí)別%>); 
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地圖中心點(diǎn)坐標(biāo)并設(shè)定縮放級(jí)別 
maplet.addControl(new MStandardControl()); 
} 
function setp() 
{ 
if (marker)//判定是否已經(jīng)添加標(biāo)記 
{ 
alert("已經(jīng)添加過(guò)標(biāo)記了"); 
return; 
} 
maplet.setMode("bookmark");//設(shè)定為添加標(biāo)記模式 
maplet.setCursorIcon("tb1.gif"); //添加鼠標(biāo)跟隨標(biāo)簽 
myEventListener = MEvent.bind(maplet, "click", this, addp); //注冊(cè)click事件句柄 
} 
//這里的參數(shù)要寫(xiě)全即使你不使用event 
function addp(event,point){ 
if(!marker){ 
marker = new MMarker( point, //坐標(biāo) 
new MIcon("mark.gif", 24, 24),//標(biāo)簽ICO(圖片,大小) 
new MInfoWindow("蔡瑞福莊河市", "史上最佳"),//標(biāo)注對(duì)象 
new MLabel("蔡瑞福")//小標(biāo)簽 
); 
marker.bEditable=true; 
marker.dragAnimation=true; 
maplet.addOverlay(marker);//添加標(biāo)注 
marker.setEditable(true); //設(shè)定標(biāo)注編輯狀態(tài) 
maplet.setMode("pan"); //設(shè)定地圖為拖動(dòng)(正常)狀態(tài) 
le= maplet.getZoomLevel(); //獲取當(dāng)前縮放級(jí)別 
document.getElementById("findp").style.display="block"; 
document.getElementById("delp").style.display="block"; 
document.getElementById("savep").style.display="block"; 
MEvent.removeListener(myEventListener);//注銷(xiāo)事件 
} 
} 
//查找標(biāo)記 
function find(){ 
maplet.centerAndZoom(marker.pt, le);//定位標(biāo)記 
} 
//移除所有標(biāo)記 
function del(){ 
//移除已經(jīng)設(shè)定的坐標(biāo) 
maplet.clearOverlays(true); 
location.reload(); //在重新添加的時(shí)候有點(diǎn)bug 我這里是直接刷新頁(yè)面 來(lái)重置 
/*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();*/ 
} 
//提取標(biāo)記數(shù)據(jù) 
function savep() 
{ 
alert("當(dāng)前坐標(biāo)點(diǎn)\n經(jīng)度:"+marker.pt.lon+"\n維度:"+marker.pt.lat+"\n縮放級(jí)別:"+le); 
} 
</script> 
</head> 
<body onload="initMap()"> 
<table width="501"> 
<tr><td><input type="button" value="添加標(biāo)注" onclick="setp()"/></td> 
<td><input type="button" id="findp" value="查看標(biāo)記" style="display:none;" onclick="find()"/></td> 
<td><input type="button" id="delp" value="刪除標(biāo)記" 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> 