百度離線API獲取座標和添加標註

前言：對百度地圖的使用已經成爲了咱們生活中的一部分，對於習慣使用百度地圖的朋友來講更是不可或缺。可是若是沒有網絡的話就不能正常使用百度地圖的服務，製做一款離線地圖在這個時候就顯得尤其重要，那咱們應該如何製做呢，今天就給你們分享一下如何製做離線百度地圖並獲取座標和添加標註。
javascript

一、材料準備css

水經注百度電子地圖下載器百度地圖離線API：BaiduMap V1.3

百度地圖離線API下載地址：

html

二、製做過程
java

2.1下載瓦片api

打開水經注百度電子地圖下載器，將地圖縮小至全球可見，框選上全球（圖1），雙擊左鍵，彈出「新建任務」，設置下載名稱和選擇下載級別，這裏我選擇的是1到6級（圖2），單擊「確認」開始下載。

網絡

圖1ui

圖2url

2.2導出瓦片spa

點擊「個人下載」，勾選上剛剛下載的地圖數據，就能夠在下面查看到剛纔下載的地圖（圖3），點擊「導出拼接圖片」，彈出「導出圖片數據」對話框，在「導出類型」一欄選擇「瓦片.百度」（圖4），點擊「輸出」開始導出瓦片。導出完成後，找到瓦片存儲的文件夾，能夠看到導出的瓦片（圖5）

.net

圖3

圖4

圖5

2.3加載瓦片

打開文件夾BaiduMap V1.3，咱們能夠看到3個文件夾和1個示例代碼html文件和一個css文件（圖6），其中images文件夾是存儲的地圖相關的控件圖標的；js文件夾存儲的是離線API的相關js代碼；demo.html是調用瓦片的示例代碼；bmap.css是相關的css樣式文件。最重要的是maptile文件夾，裏面存放的是須要調用的瓦片。

接下來說如何調用瓦片，這裏其實只要把下載好的瓦片複製到maptile文件夾下就能夠了，這裏給你們講解一下代碼的組成。

圖6

2.4代碼組成

2.4.1首先咱們須要鏈接到百度的API上：

<!DOCTYPE html>

<html>

<head>

<title>百度離線版DEMO</title>

</head>

</html>

2.4.2新建一個容器，用以存放地圖和相關的控件：

<body>

</div>

</body>

2.4.3加載百度的地圖和添加相關的控件：

var mapOptions = {

//minZoom: 12, 地圖最小層級

mapType: BMAP_NORMAL_MAP

}

var map = new BMap.Map("container", mapOptions); //設置衛星圖爲底圖BMAP_PERSPECTIVE_MAP

var initPoint = new BMap.Point(116.404, 39.915); // 建立點座標

map.centerAndZoom(initPoint,3); // 初始化地圖,設置中心點座標和地圖級別。

map.enableScrollWheelZoom(); // 啓用滾輪放大縮小。

map.enableKeyboard(); // 啓用鍵盤操做。

map.enableContinuousZoom();//啓用連續縮放效果

// ----- control -----

map.addControl(new BMap.NavigationControl()); //地圖平移縮放控件

map.addControl(new BMap.ScaleControl()); //顯示比例尺在右下角

</script>

2.4.4添加標註並獲取座標信息：

// ----- maker -----

addCabinMarker(initPoint);//設置標註點

function addCabinMarker(point) {

var cabinIcon = new BMap.Icon("images/marker_red_sprite.png", new BMap.Size(32, 37));

var cabinMarkerOptions = {

icon: cabinIcon,

enableDragging: true,

draggingCursor: "move",

title: "標註點"

}

var cabinMarker = new BMap.Marker(point, cabinMarkerOptions);

cabinMarker.setAnimation(BMAP_ANIMATION_DROP);

map.addOverlay(cabinMarker);

cabinMarker.addEventListener("dragging", function(e) {

document.getElementById("position").innerHTML = "座標像素</br>x :" + e.pixel.x + " y :" + e.pixel.y + "<br>座標經緯度</br>經度: " + e.point.lng + " 緯度: " + e.point.lat;//獲取經緯度

});

}

如今，咱們已經制做完成百度的離線地圖了，如今給你們提供完整的代碼：