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>