HTML5定位百度地图API接口应用



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>