本文地圖使用的是圖地圖
圖吧地圖在線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 網頁上顯示的），以及一系列向地圖添加內容的服務，從而使您可以在自己的網站上創建穩定的地圖應用程序。
公共測試密鑰：
復制代碼 代碼如下:
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" /> 標簽以保證地圖折線功能正確執行。
這裡只有前台部分源碼
你需要在你的項目中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); //設定標注編輯狀態
maplet.setMode("pan"); //設定地圖為拖動(正常)狀態
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>
源碼下載地址: http://xiazai.jb51.net/201004/yuanma/mapbar.rar