HTML5 地理定位 【來自百度應用分享平臺】

百度給的地圖API接口相當完善，複製過來一下，以後備用

基本使用方法：

<!--引入百度地圖API--> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

首先引入百度地圖API

之後創建地圖：

var mp = new BMap.Map('map'); //map此處爲id名

var geo = navigator.geolocation;

之後所有的方法操作，都是使用mp.方法的方式進行書寫即可，例如，希望開啓地圖拖拽：

mp.enableDragging();

如下爲百度的方法接口：

構造函數

構造函數	描述
Map(container:String|HTMLElement[, opts:MapOptions])	在指定的容器內創建地圖實例，之後需要調用Map.centerAndZoom()方法對地圖進行初始化。未進行初始化的地圖將不能進行任何操作。

配置方法

方法	返 回 值	描述
enableDragging()	none	啓用地圖拖拽，默認啓用。
disableDragging()	none	禁用地圖拖拽。
enableScrollWheelZoom()	none	啓用滾輪放大縮小，默認禁用。
disableScrollWheelZoom()	none	禁用滾輪放大縮小。
enableDoubleClickZoom()	none	啓用雙擊放大，默認啓用。
disableDoubleClickZoom()	none	禁用雙擊放大。
enableKeyboard()	none	啓用鍵盤操作，默認禁用。鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。
disableKeyboard()	none	禁用鍵盤操作。
enableInertialDragging()	none	啓用地圖慣性拖拽，默認禁用。 (自 1.1 新增)
disableInertialDragging()	none	禁用地圖慣性拖拽。 (自 1.1 新增)
enableContinuousZoom()	none	啓用連續縮放效果，默認禁用。 (自 1.1 新增)
disableContinuousZoom()	none	禁用連續縮放效果。 (自 1.1 新增)
enablePinchToZoom()	none	啓用雙指操作縮放，默認啓用。 (自 1.1 新增)
disablePinchToZoom()	none	禁用雙指操作縮放。 (自 1.1 新增)
enableAutoResize()	none	啓用自動適應容器尺寸變化，默認啓用。 (自 1.2 新增)
disableAutoResize()	none	禁用自動適應容器尺寸變化。 (自 1.2 新增)
setDefaultCursor(cursor:String)	none	設置地圖默認的鼠標指針樣式。參數cursor應符合CSS的cursor屬性規範。 (自 1.1 新增)
getDefaultCursor()	String	返回地圖默認的鼠標指針樣式。 (自 1.1 新增)
setDraggingCursor(cursor:String)	none	設置拖拽地圖時的鼠標指針樣式。參數cursor應符合CSS的cursor屬性規範。 (自 1.1 新增)
getDraggingCursor()	String	返回拖拽地圖時的鼠標指針樣式。 (自 1.1 新增)
setMinZoom(zoom:Number)	none	設置地圖允許的最小級別。取值不得小於地圖類型所允許的最小級別。 (自 1.2 新增)
setMaxZoom(zoom:Number)	none	設置地圖允許的最大級別。取值不得大於地圖類型所允許的最大級別。 (自 1.2 新增)

地圖狀態方法

方法	返回值	描述
getBounds()	Bounds	返回地圖可視區域，以地理座標表示。
getCenter()	Point	返回地圖當前中心點。
getDistance(start:Point, end:Point)	Number	返回兩點之間的距離，單位是米。(自 1.1 新增)
getMapType()	MapType	返回地圖類型。(自 1.2 新增)
getSize()	Size	返回地圖視圖的大小，以像素表示。
getViewport(view: Array<Point>[, viewportOptions: ViewportOptions])	Viewport	根據提供的地理區域或座標獲得最佳的地圖視野，返回的對象中包含center和zoom屬性，分別表示地圖的中心點和級別。此方法僅返回視野信息，不會將新的中心點和級別做用到當前地圖上。(自 1.1 新增)
getZoom()	Number	返回地圖當前縮放級別。

修改地圖狀態方法

方法	返回值	描述
centerAndZoom(center:Point, zoom:Number)	none	設初始化地圖。 如果center類型爲Point時，zoom必須賦值，賦值範圍爲3-19級，若調用高清底圖（針對移動端開發）時，zoom賦值範圍爲3-18級。如果center類型爲字符串時，比如“北京”，zoom可以忽略，地圖將自動根據center適配最佳zoom級別。
panTo(center:Point[, opts:PanOptions])	none	將地圖的中心點更改爲給定的點。如果該點在當前的地圖視圖中已經可見，則會以平滑動畫的方式移動到中心點位置。可以通過配置強制移動過程不使用動畫效果。
panBy(x:Number, y:Number[, opts: PanOptions])	none	將地圖在水平位置上移動x像素，垂直位置上移動y像素。如果指定的像素大於可視區域範圍或者在配置中指定沒有動畫效果，則不執行滑動效果。
reset()	none	重新設置地圖，恢復地圖初始化時的中心點和級別。
setCenter(center:Point|String)	none	設置地圖中心點。center除了可以爲座標點以外，還支持城市名。注：使用城市名進行設置時該方法是異步執行，使用座標點設置時該方法不是異步執行。
setCurrentCity(city:String)	none	設置地圖城市，注意當地圖初始化時的類型設置爲BMAP_PERSPECTIVE_MAP時，需要在調用centerAndZoom之前調用此方法設置地圖所在城市。例如： var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); 注意：初始化的座標應與您設置的城市對應，否則地圖將無法正常顯示。如果地圖初始化爲BMAP_NORMAL_MAP類型，則在調用setMapType切換地圖類型時也要調用此方法。(自 1.1 新增)
setMapType(mapType:MapTypes)	none	設置地圖類型。注意，當設置地圖類型爲BMAP_PERSPECTIVE_MAP時，需要調用map.setCurrentCity方法設置城市。(自 1.1 新增)
setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions])	none	根據提供的地理區域或座標設置地圖視野，調整後的視野會保證包含提供的地理區域或座標。(自 1.1 新增)
zoomTo(zoom:Number)	none	（自1.2廢棄）
setZoom(zoom:Number)	none	將視圖切換到指定的縮放等級，中心點座標不變。注意：當有信息窗口在地圖上打開時，地圖縮放將保證信息窗口所在的座標位置不動。（自1.2新增）
highResolutionEnabled()	Boolean	是否使用高分辨率底圖。僅當mapOptions.enableHighResolution屬性爲true且設備支持高分辨率時返回true。
zoomIn()	none	放大一級視圖。
zoomOut()	none	縮小一級視圖。
addHotspot(hotspot:Hotspot)	none	爲地圖添加熱區。(自 1.2 新增)
removeHotspot(hotspot:Hotspot)	none	移除某個地圖熱區。(自 1.2 新增)
clearHotspots()	none	清空地圖所有熱區。(自 1.2 新增)

控件方法

方法	返回值	描述
addControl(control:Control)	none	將控件添加到地圖，一個控件實例只能向地圖中添加一次。
removeControl(control:Control)	none	從地圖中移除控件。如果控件從未被添加到地圖中，則該移除不起任何作用。
getContainer()	HTMLElement	返回地圖的容器元素。當創建用戶自定義控件時，需要自行實現Control.initialize()方法，並將控件的容器元素添加到地圖上，通過此方法可獲得地圖容器。

右鍵菜單方法

方法	返回值	描述
addContextMenu(menu:ContextMenu)	none	添加右鍵菜單。
removeContextMenu(menu:ContextMenu)	none	移除右鍵菜單。

覆蓋物方法

方法	返回值	描述
addOverlay(overlay:Overlay)	none	將覆蓋物添加到地圖中，一個覆蓋物實例只能向地圖中添加一次。
removeOverlay(overlay:Overlay)	none	從地圖中移除覆蓋物。如果覆蓋物從未被添加到地圖中，則該移除不起任何作用。
clearOverlays()	none	清除地圖上所有覆蓋物。
openInfoWindow(infoWnd:InfoWindow, point:Point)	none	在地圖上打開信息窗口。
closeInfoWindow()	none	關閉在地圖上打開的信息窗口。在標註上打開的信息窗口也可通過此方法進行關閉。
pointToOverlayPixel(point:Point)	Pixel	根據地理座標獲取對應的覆蓋物容器的座標，此方法用於自定義覆蓋物。(自 1.1 新增)
overlayPixelToPoint(pixel:Pixel)	Point	根據覆蓋物容器的座標獲取對應的地理座標。(自 1.1 新增)
getInfoWindow()	InfoWindow|Null	返回地圖上處於打開狀態的信息窗的實例。當地圖沒有打開的信息窗口時，此方法返回null。(自 1.1 新增)
getOverlays()	Array<Overlay>	返回地圖上的所有覆蓋物。(自 1.1 新增)
getPanes()	MapPanes	返回地圖覆蓋物容器列表。(自 1.1 新增)

地圖圖層方法

方法	返回值	描述
addTileLayer(tileLayer:TileLayer)	none	添加一個自定義地圖圖層。
removeTileLayer(tilelayer:TileLayer)	none	移除一個自定義地圖圖層。
getTileLayer(mapType:String)	TileLayer	通過地圖類型得到一個地圖圖層對象。

座標變換

方法	返回值	描述
pixelToPoint(pixel:Pixel)	Point	像素座標轉換爲經緯度座標。
pointToPixel(point:Point)	Pixel	經緯度座標轉換爲像素座標。

事件

事件	參數	描述
click	{type, target, point, pixel, overlay}	左鍵單擊地圖時觸發此事件。 當雙擊時，產生的事件序列爲： click click dblclick (自 1.1 更新)
dblclick	{type, target, pixel, point}	鼠標雙擊地圖時會觸發此事件。
rightclick	{type, target, point, pixel, overlay}	右鍵單擊地圖時觸發此事件。 當雙擊時，產生的事件序列爲： rightclick rightclick rightdblclick (自 1.1 更新)
rightdblclick	{type, target, point, pixel, overlay}	右鍵雙擊地圖時觸發此事件。 (自 1.1 新增)
maptypechange	{type, target}	地圖類型發生變化時觸發此事件。 (自 1.1 新增)
mousemove	{type, target, point, pixel, overlay}	鼠標在地圖區域移動過程中觸發此事件。 (自 1.1 新增)
mouseover	{type, target}	鼠標移入地圖區域時觸發此事件。 (自 1.2 新增)
mouseout	{type, target}	鼠標移出地圖區域時觸發此事件。 (自 1.2 新增)
movestart	{type, target}	地圖移動開始時觸發此事件。
moving	{type, target}	地圖移動過程中觸發此事件。
moveend	{type, target}	地圖移動結束時觸發此事件。
zoomstart	{type, target}	地圖更改縮放級別開始時觸發觸發此事件。
zoomend	{type, target}	地圖更改縮放級別結束時觸發觸發此事件。
addoverlay	{type, target}	當使用Map.addOverlay()方法向地圖中添加單個覆蓋物時會觸發此事件。
addcontrol	{type, target}	當使用Map.addControl()方法向地圖中添加單個控件時會觸發此事件。
removecontrol	{type, target}	當使用Map.removeControl()方法移除單個控件時會觸發此事件。
removeoverlay	{type, target}	當使用Map.removeOverlay()方法移除單個覆蓋物時會觸發此事件。
clearoverlays	{type, target}	當使用Map.clearOverlays()方法一次性移除全部覆蓋物時會觸發此事件。
dragstart	{type, target, pixel, point}	開始拖拽地圖時觸發。
dragging	{type, target, pixel, point}	拖拽地圖過程中觸發。
dragend	{type, target, pixel, point}	停止拖拽地圖時觸發。
addtilelayer	{type, target}	添加一個自定義地圖圖層時觸發此事件。
removetilelayer	{type, target}	移除一個自定義地圖圖層時觸發此事件。
load	{type, target, pixel, point, zoom}	調用Map.centerAndZoom()方法時會觸發此事件。這表示位置、縮放層級已經確定，但可能還在載入地圖圖塊。
resize	{type, target, size}	地圖可視區域大小發生變化時會觸發此事件。
hotspotclick	{type, target, hotspots}	點擊熱區時觸發此事件。(自 1.2 新增)
hotspotover	{type, target, hotspots}	鼠標移至熱區時觸發此事件。(自 1.2 新增)
hotspotout	{type, target, hotspots}	鼠標移出熱區時觸發此事件。(自 1.2 新增)
tilesloaded	{type, target}	當地圖所有圖塊完成加載時觸發此事件。(自 1.2 新增)

寫個小例子：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> 顯示自己的位置 </title> <style type="text/css"> </style> <!--引入百度地圖API--> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> </head> <body> <div id="map" style="width:500px;height:320px"></div> </body> <script type="text/javascript"> function initialize() { var mp = new BMap.Map('map');//map爲id名 var geo = navigator.geolocation; geo.getCurrentPosition(function(pos){ var point = new BMap.Point(pos.coords.longitude,pos.coords.latitude); mp.centerAndZoom(point, 10);//設置中心，放大係數 var marker = new BMap.Marker(point); // 創建標註 mp.addOverlay(marker); mp.enableDragging();//允許拖拽 mp.enableScrollWheelZoom();//允許放大 var opts = {type:BMAP_NAVIGATION_CONTROL_ZOOM} mp.addControl(new BMap.NavigationControl(opts));//添加導航控件 }); } window.onload = initialize; </script> </html>