一、使用场景
地图的使用场景非常广泛。地图定位可以更直观的说明位置以及周边环境，让用户更好的了解地理位置信息，导航功能更好的路径规划，以方便出行。定位、导航等成为互联网上最常见的功能之一。
二、技术介绍
市面常见的地图API有很多，例如：
百度地图API ：lbsyun.baidu.com
高德地图API：lbs.amap.com
腾讯地图API：lbs.qq.com
搜狗地图API：map.sogou.com/api/
其中最常用的是高德地图API(阿里)和百度地图API。
这里要说的是百度地图API。
三、技术使用
介绍的是：定位技术、主要讲路径规划和导航。
1 账号说明
查看API地址：lbsyun.baidu.com
需要先进行注册账号和申请密钥（ak）才能使用这个服务，接口也没有次数限制，可以放心使用
- 注册登录
- 进入控制台
- 查看应用->创建应用，填写应用名称和应用类型，启用服务可以全部勾选，白名单在开发阶段可以先设置为*
- 提交
就可以得到这个服务的ak了
2 helloworld
准备一个html页面，引入js文件，格式为
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
复制代码然后创建一个地图容器。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标 ，此处使用天安门坐标表示
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
复制代码然后在js中创建地图对象，放置到容器中，然后还可以再设置一个标志点，以标志点为中心，展开地图。
注意API与引入的js的版本有关，修改为别人的百度地图js路径时可能会导致自定义的地图失效【因为API版本不同】，比如Web开发的地图API是BMapGL。
四、部分API
网站：mapopen-pub-jsapi.bj.bcebos.com/jsapi/refer…
Map
此类是地图API的核心类，用来实例化一个地图。请注意WebGL版本的地图API的命名空间是BMapGL，不同的版本命名有所不同。 示例：const map = new BMapGL.Map('container');
| 构造函数 | 描述 |
|---|---|
| Map(container: String | HTMLElement, opts: MapOptions ) | 在指定的容器内创建地图实例，**之后需要调用Map.centerAndZoom()方法对地图进行初始化。**未进行初始化的地图将不能进行任何操作 |
建议将地图的初始化放在js最前面，然后将获取标签、重新定位等一些操作放在初始化函数中。
这样当我们的中心点需要从数据库中查出来，或者需要获取用户定位时，可以先调用Map.centerAndZoom()方法对地图进行初始化，传入一个固定的默认的点。
不然查询失败或者是用户拒绝给予定位时的体验就会很差，地图没法被初始化或是初始化时间太长了。
| 方法 | 返回值 | 描述 |
|---|---|---|
| enableDragging() | none | 启用地图拖拽，默认启用 |
| disableDragging() | none | 禁用地图拖拽 |
| enableInertialDragging() | none | 启用地图惯性拖拽，默认禁用 |
| disableInertialDragging() | none | 禁用地图惯性拖拽 |
| enableScrollWheelZoom() | none | 允许地图可被鼠标滚轮缩放，默认禁用 |
| disableScrollWheelZoom() | none | 禁止地图被鼠标滚轮缩放 |
| enableContinuousZoom() | none | 开启双击平滑缩放效果 |
| disableContinuousZoom() | none | 关闭双击平滑缩放效果 |
| enableResizeOnCenter() | none | 开启图区resize中心点不变 |
| disableResizeOnCenter() | none | 关闭图区resize中心点不变 |
| enableDoubleClickZoom() | none | 启用地图双击缩放，左键双击放大、右键双击缩小 |
| disableDoubleClickZoom() | none | 取消地图双击缩放 |
| enableKeyboard() | none | 启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级 |
| disableKeyboard() | none | 禁用键盘操作 |
| enablePinchToZoom() | none | 启用双指缩放地图。 |
| disablePinchToZoom() | none | 禁用双指缩放地图。 |
| enableRotateGestures() | none | 是否允许通过手势旋转地图。 |
| enableTiltGestures() | none | 是否允许通过手势倾斜地图。 |
| enableAutoResize() | none | 启用自动适应容器尺寸变化，默认启用 |
| disableAutoResize() | none | 禁用自动适应容器尺寸变化 |
| checkResize() | none | 地图容器变化后调用此方法用来重新铺图 |
| resize() | none | 强制地图调整尺寸，此时会以当前容器尺寸为基准重新计算视野所需图像数据并重新绘制。当关闭自动调整视野时（enableAutoResize 配置），需要调用此方法来强制地图刷新。 |
| getSize() | Size | 返回地图当前尺寸，以像素表示 |
| getContainerSize() | Size | 获取地图容器尺寸 |
| getZoomUnits() | Number | 返回当前地图级别，一个像素对应多少单位的平面墨卡托坐标 |
| getContainer() | HTMLElement | 返回地图的DOM容器元素。当创建用户自定义控件时，需要自行实现Control.initialize()方法，并将控件的容器元素添加到地图上，通过此方法可获得地图容器 |
| pixelToPoint(pixel: Pixel ) | Point | 像素坐标转换为经纬度坐标 |
| pointToPixel(point: Point ) | Pixel | 经纬度坐标转换为像素坐标 |
| lnglatToMercator(lng: Number, lat: Number) | [McLng, McLat] | 经纬度球体坐标转换为墨卡托平面坐标 |
| mercatorToLnglat(McLng: Number, lat: McLat) | [lng, lat] | 墨卡托平面坐标转换为经纬度球体坐标 |
| isLoaded() | boolean | 返回地图是否经过centerAndZoom进行初始化 |
| addSpots(spots: Array, options: Object) | number | 添加地点区域，作为地图上的虚拟可点击区域。其中参数spots为热区点数组，options为可选配置参数；返回区域id。 |
| getSpots(id: string) | Array | 根据id返回地点区域数组 |
| removeSpots(id: number) | none | 根据id移除区域数组 |
| clearSpots() | none | 清除地点区域，此操作将清空所有虚拟可点数据 |
| clearLabels() | none | 清空当前map所有的自定义底图标注 |
| addLabelsToMapTile(labels:Array) | none | 在底图上添加文字，这些文字会和底图文字一同参与避让。 |
| removeLabelsFromMapTile(labelUids:Array) | none | 从底图上移除文字标注，参数为uid数组，根据数组里的uid进行移除 |
| getIconByClickPosition(clickPosition: Pixel) | Object | null | 通过点击坐标获取当前点中的底图icon，如果获取到返回其{name, uid, position}，否则返回null |
| setBounds(bounds:Bounds) | none | 设置地图可拖动区域，参数为地图拖拽的区域范围 |
| getBounds() | Bounds | 获取地图当前视野范围的矩形区域，以地理坐标表示。如果地图尚未初始化则返回一个空的 Bounds 实例。 |
| getCoordType() | string | 获取地图坐标类型，为CoordType常量 |
| getMapStyleId() | string | 获取当前地图样式id，对于内置样式则返回样式名称；对于自定义样式，则返回内部自动生成的样式id |
| getPanes() | MapPanes | 获取覆盖物容器元素，返回地图覆盖物容器对象 |
| getInfoWindow() | InfoWindow | null | 获取当前打开的信息窗口实例，如果当前地图没有处于打开状态信息窗口，则返回 null |
| setDefaultCursor(cursor: String) | none | 设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范 |
| getDefaultCursor() | String | 获取地图默认的鼠标指针样式，返回cursor值 |
| setDraggingCursor(cursor: String) | none | 设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范 |
| getDraggingCursor() | String | 返回拖拽地图时的鼠标指针样式 |
| setMinZoom(zoom: Number) | none | 设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别 |
| setMaxZoom(zoom: Number) | none | 设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别 |
| getDistance(start: Point , end: Point ) | Number | 返回两点之间的距离，单位是米 |
| getMapType() | MapTypeId | 返回地图类型 |
| setViewport(view: Array | Viewport , viewportOptions: ViewportOptions ) | none | 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标 |
| getViewport(view: Array< Point >, viewportOptions: ViewportOptions ) | Viewport | 根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。此方法仅返回视野信息，不会将新的中心点和级别做用到当前地图上 |
| centerAndZoom(center: Point , zoom: Number) | none | 设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别 |
| panTo(center: Point ) | none | 将地图的中心点更改为给定的点，跳转到指定中心点进行渲染。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果 |
| panBy(x: Number, y: Number) | none | 将地图在水平位置上移动x像素，垂直位置上移动y像素。如果指定的像素大于可视区域范围或者在配置中指定没有动画效果，则不执行滑动效果 |
| flyTo(center: Point , zoom: Number) | none | 飞到指定的中心点和级别，提供给定位缩放地图使用 |
| reset() | none | 重新设置地图，恢复地图初始化时的中心点和级别 |
| setCenter(center: Point | String[, options: Object]) | none | 设置地图中心点。center除了可以为坐标点以外，还支持城市名。可选配置参数包括'noAnimation: boolean'是否禁用动画效果；'callback: function'动画结束后调用此方法，如果没有动画则立即调用 |
| getCenter() | Point | 返回地图当前中心点 |
| setMapType(mapTypeId: MapTypeId ) | none | 设置地图类型 |
| setZoom(zoom: Number[,options]) | none | 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。可选配置参数包括'noAnimation：boolean'是否禁用动画效果；'callback:function'动画结束后会调用此方法，如果没有动画则立即调用；'zoomCenter：Point'缩放中心点，默认以地图中心点为基准缩放 |
| getZoom() | Number | 返回地图当前缩放级别 |
| zoomIn() | none | 放大一级视图 |
| zoomOut() | none | 缩小一级视图 |
| addControl(control: Control ) | none | 将控件添加到地图，一个控件实例只能向地图中添加一次 |
| removeControl(control: Control ) | none | 从地图中移除控件。如果控件从未被添加到地图中，则该移除不起任何作用 |
| addContextMenu()(menu: ContextMenu ) | none | 添加右键菜单 |
| removeContextMenu()(menu: ContextMenu ) | none | 移除右键菜单 |
| addOverlay(overlay: Overlay ) | none | 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次 |
| removeOverlay(overlay: Overlay ) | none | 从地图中移除覆盖物。如果覆盖物从未被添加到地图中，则该移除不起任何作用 |
| clearOverlays() | none | 清除地图上所有覆盖物 |
| pointToOverlayPixel(point: Point ) | Pixel | 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物 |
| overlayPixelToPoint(pixel: Pixel ) | Point | 根据覆盖物容器的坐标获取对应的地理坐标 |
| getOverlays() | Array< Overlay > | 获取当前地图上的所有覆盖物，返回覆盖物对象的集合 |
| getPanes() | MapPanes | 返回地图覆盖物容器列表 |
| getCurrentMaxTilt() | number | 获取当前地图允许的最大倾斜角度 |
| hightlightSpotByUid(uid: string, tilePosStr: string) | none | 根据 uid 将底图上的 poi 高亮显示，其中参数tilePosStr为label的位置字符串 |
| resetSpotStatus() | none | 重置热区状态，即将高亮的热区点取消 |
| addAreaSpot() | none | 重置热区状态，即将高亮的热区点取消 |
| getAreaSpot(id: string) | Array | 返回地点区域数组 |
| removeAreaSpot(id: string) | none | 移除区域数组 |
| clearAreaSpots() | none | 清除地点区域，此操作将清空所有虚拟可点数据 |
| setTrafficOn() | none | 开启路况图层 |
| setTrafficOff() | none | 关闭路况图层 |
| showOverlayContainer() | none | 显示覆盖物 |
| hideOverlayContainer() | none | 不显示覆盖物 |
| setMapStyleV2(config: Object) | none | 设置个性化地图，参数为个性化配置对象 |
| startViewAnimation(viewAnimation: ViewAnimation) | Number | 启动视角动画 |
| cancelViewAnimation(viewAnimation: ViewAnimation) | none | 停止视角动画 |
| getMapScreenshot() | url | 获取地图截图，地球模式不支持。需要初始化地图配置preserveDrawingBuffer：true，否则是黑屏 |
| loadMapStyleFiles(callback: Function) | none | 加载地图当前样式所需要的样式文件，callback为加载成功后的回调函数 |
| setCopyrightOffset(logo: Object, cpy: Object) | none | 设置版权信息位置，其中logo为logo位置，copyright为文字位置 |
| destroy() | none | 销毁地图，当使用 WebGL 渲染地图时，如果确认不再使用该地图实例，则需要调用本方法销毁 WebGL 上下文，否则频繁创建新地图实例会导致浏览器报：too many WebGL context 的警告 |
| isSupportEarth() | boolean | 判断浏览器是否支持地球,支持返回true,否则返回false |
| 事件 | 参数 | 描述 |
|---|---|---|
| click | {type, target, latlng, pixel, overlay} | 左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick |
| dblclick | {type, target, pixel, point} | 鼠标双击地图时会触发此事件 |
| rightclick | {type, target, latlng, pixel, overlay} | 右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick |
| rightdblclick | {type, target, latlng, pixel, overlay} | 右键双击地图时触发此事件 |
| maptypechange | {type, target} | 地图类型发生变化时触发此事件 |
| mousemove | {type, target, latlng, pixel, overlay} | 鼠标在地图区域移动过程中触发此事件 |
| mouseover | {type, target} | 鼠标移入地图区域时触发此事件 |
| mouseout | {type, target} | 鼠标移出地图区域时触发此事件 |
| 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} | 停止拖拽地图时触发 |
| resize | {type, target, size} | 地图可视区域大小发生变化时会触发此事件 |
Geolocation
返回用户当前的位置，会首先调用浏览器自带的定位接口，如果失败或不支持则调用高精IP定位（需要开通权限，否则调用普通定位）接口，如果用户拒绝授权定位，则无法返回任何定位结果。
| 构造函数 | 描述 |
|---|---|
| Geolocation() | 创建Geolocation对象实例 |
| 方法 | 返回值 | 描述 |
|---|---|---|
| getCurrentPosition(callback: Function, opts:PositionOptions) | none | 返回用户当前位置。定位完成时（包括成功、失败、超时等情况），回调参数为GeolocationResult对象，否则为null |
| getStatus() | StatusCode | 定位完成后的状态码。分为BMAP_STATUS_SUCCESS，BMAP_STATUS_UNKNOWN_LOCATION，BMAP_STATUS_PERMISSION_DENIED，BMAP_STATUS_TIMEOUT |
| enableSDKLocation() | none | 开启SDK辅助定位，仅当使用环境为移动web混合开发，且开启了定位sdk辅助定位功能后生效 |
| disableSDKLocation() | none | 关闭SDK辅助定位 |
Marker
此类表示地图上的一个图像标注。
| 构造函数 | 描述 |
|---|---|
| Marker(point: Point , opts: MarkerOptions ) | 创建一个图像标注实例。point参数指定了图像标注所在的地理位置 |
| 方法 | 返回值 | 描述 |
|---|---|---|
| setIcon(icon: Icon ) | none | 设置标注所用的图标对象 |
| getIcon() | Icon | 返回标注所用的图标对象 |
| setPosition(position: Point ) | none | 设置标注的地理坐标 |
| getPosition() | Point | 返回标注的地理坐标 |
| setOffset(offset: Size ) | none | 设置标注的偏移值 |
| getOffset() | Size | 返回标注的偏移值 |
| setTitle(title: String) | none | 设置标注的标题，当鼠标移至标注上时显示此标题 |
| getTitle() | String | 返回标注的标题 |
| setLabel(label: Label ) | none | 为标注添加文本标注 |
| getLabel() | Label | 返回标注的文本内容 |
| enableDragging() | none | 开启标注拖拽功能 |
| disableDragging() | none | 关闭标注拖拽功能 |
| enableMassClear() | none | 允许覆盖物在map.clearOverlays方法中被清除 |
| disableMassClear() | none | 禁止覆盖物在map.clearOverlays方法中被清除 |
| setZIndex(zIndex: Number) | none | 设置覆盖物的zIndex |
| getMap() | Map | 返回覆盖物所在的map对象 |
| setRotation(rotation: Number) | none | 设置点的旋转角度 |
| getRotation() | Number | 获取点的旋转角度 |
| addEventListener(event: String, handler: Function) | none | 添加事件监听函数 |
| removeEventListener(event: String, handler: Function) | none | 移除事件监听函数 |
Label
| 构造函数 | 描述 |
|---|---|
| Label(content: String, opts: LabelOptions ) | 创建一个文本标注实例。point参数指定了文本标注所在的地理位置 |
| 方法 | 返回值 | 描述 |
|---|---|---|
| setStyle(styles: Object) | none | 设置文本标注样式，该样式将作用于文本标注的容器元素上。其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor |
| setContent(content: String) | none | 设置文本标注的内容。支持HTML |
| setPosition(position: Point) | none | 设置文本标注坐标。仅当通过Map.addOverlay()方法添加的文本标注有效 |
| getPosition() | Point | 获取Label的地理坐标 |
| setOffset(offset: Size) | none | 设置文本标注的偏移值 |
| getOffset() | Size | 返回文本标注的偏移值 |
| setTitle(title: String) | none | 设置文本标注的标题，当鼠标移至标注上时显示此标题 |
| getTitle() | String | 返回文本标注的标题 |
| enableMassClear() | none | 允许覆盖物在map.clearOverlays方法中被清除 |
| disableMassClear() | none | 禁止覆盖物在map.clearOverlays方法中被清除 |
| setZIndex(zIndex: Number) | none | 设置覆盖物的zIndex |
| setPosition(position: Point) | none | 设置地理坐标 |
| getMap() | Map | 返回覆盖物所在的map对象 |
| addEventListener(event: String, handler: Function) | none | 添加事件监听函数 |
| removeEventListener(event: String, handler: Function) | none | 移除事件监听函数 |
| 事件 | 参数 | 描述 |
|---|---|---|
| click | event{type, target} | 点击文本标注后会触发此事件 |
| dblclick | event{type, target} | 双击文本标注后会触发此事件 |
| mousedown | event{type, target} | 鼠标在文本标注上按下触发此事件 |
| mouseup | event{type, target} | 鼠标在文本标注释放触发此事件 |
| mouseout | event{type, target} | 鼠标离开文本标注时触发此事件 |
| mouseover | event{type, target} | 当鼠标进入文本标注区域时会触发此事件 |
| remove | event{type, target} | 移除文本标注时触发 |
| rightclick | event{type, target} | 右键点击标注时触发此事件 |