javascript+mapbar實現地圖定位

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文地圖使用的是圖地圖
圖吧地圖線上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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More