HTML5學習筆記（四）地圖功能
一、HTML5中地理定位
地理定位功能並不是屬於HTML5專有內容
HTML5的地理定位技術,由Google公司提供的Google Map產品來實現地理定位技術
但是中國國內不能使用Google公司所有服務和產品，所以選擇百度地圖和高德地圖
百度地圖市場份額大，所以我們學習使用百度地圖
二、百度地圖
百度地圖開發網址 -
百度地圖提供的API幫助文件和Demo示例程式碼（易於使用）
三、如何使用百度地圖
①在HTML頁面中引入百度地圖的JS程式碼
http://api.map.baidu.com/api?v=2.0&ak=祕鑰
②定義顯示地圖的容器
<div id="" style=""></div>
③在javascript程式碼中建立百度地圖Map物件
var map = new BMap.Map(容器id);
④進行地圖的初始化
map.centerAndZoom();
四、百度地圖的元件
核心類 - Map類
構造器 - BMap.Map(容器id);
方法
centerAndZoom() - 初始化方法
addControl() - 新增控制元件
addOverlay() - 新增標註
Control類 - 控制元件類
ScaleControl類 - 表示地圖的比例尺
構造器 - 建立比例尺物件
NavigationControl類 - 表示移動縮放控制元件
構造器 - 建立移動縮放控制元件
Overlay類 - 遮蓋物類
Marker類 - 表示地圖的一個標註
構造器 - Marker(point)
Point類 - 標註類
<!DOCTYPE html>
<html>
<head>
<title>百度地圖的相關元件</title>
<meta charset="utf-8" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=此處寫自己的祕鑰"></script>
</head>
<body>
<div id="allmap" style="width:800px;height:600px"></div>
<script>
var map = new BMap.Map("allmap");
map.centerAndZoom("北京",12);
/*
* 為百度地圖新增控制元件
* Control類
* ScaleControl類 - 表示比例尺控制元件
* * 構造器 - ScaleControl()
* * 方法
* * setUnit() - 設定比例尺的單位
* * getUnit() - 獲取比例尺的單位
* * 新增位置,預設為左下角
* * 構造器的引數ScaleControlOptions型別
* * anchor - 設定控制元件的停靠位置
* * BMAP_ANCHOR_TOP_LEFT
* * BMAP_ANCHOR_TOP_RIGHT
* * BMAP_ANCHOR_BOTTOM_RIGHT
* * BMAP_ANCHOR_BOTTOM_LEFT - 預設值
* 將建立的控制元件新增到百度地圖中
* * 通過Map物件的addControl()方法
*/
// 建立比例尺控制元件物件
var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
// 將比例尺控制元件新增到百度地圖中
map.addControl(scale);
/*
* Control類 - 控制元件類
* NavigationControl類 - 表示地圖的平移縮放控制元件
* * 構造器 - NavigationControl()
* Map物件移除控制元件 - removeControl()
*/
var nav = new BMap.NavigationControl();
map.addControl(nav);
/*
* Overlay類 - 地圖的遮蓋物
* Marker類 - 表示地圖上一個影象標註
* * 構造器 - Marker(point)
* * point - 標註的座標值
* Map物件新增遮蓋物
* * addOverlay(marker)
* Point類 - 表示一個地理座標點
* * 構造器 - Point(lng,lat)
* * lng - number型別,表示經度
* * lat - number型別,表示緯度
* * 如何獲取位置的經度和緯度值?
*/
var point = new BMap.Point(116.404, 39.915);
// 建立地圖標註
var marker = new BMap.Marker(point);
// 新增標註
map.addOverlay(marker);
</script>
</body>
</html>