**这是我参与8月更文挑战的第23天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** 对于开发来做，地图功能是经常遇到的，所以经过我的考虑使用了百度地图因为百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先[申请密钥（ak）](http://lbsyun.baidu.com/apiconsole/key?application=key)才可使用。在您使用百度地图JavaScript API之前，请先阅读[百度地图API使用条款](http://lbsyun.baidu.com/index.php?title=open/law)。任何非营利性应用请直接使用，商业应用请参考[使用须知](http://lbsyun.baidu.com/index.php?title=open/question)。 JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。 GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。所以我们在使用百度地图之前，要先去百度地图的官网，http://lbsyun.baidu.com/apiconsole/key#/home 进行注册，并且创建针对性的应用，来获取访问应用的AK。如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0af6c839a6cc43818602c31ff8a86007~tplv-k3u1fbpfcp-watermark.image) ![image-20201024165954606.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03d869d94dfa477c93c6c3ffa67b6b54~tplv-k3u1fbpfcp-watermark.image) #### 使用示例首先在项目中安装依赖包 ``` npm i vue-baidu-map --save ``` 在入口文件main.js中引入 ``` import BaiduMap from 'vue-baidu-map'; Vue.use(BaiduMap, { ak: '你的百度地图密钥ak' }) ``` 然后再index.html入口文件添加引用 ``` ``` 然后创建vue单页添加 ``` ``` 在mounted中写创建MAP实例的方法 ``` // 百度地图API功能 var map = new BMap.Map("map"); // 创建Map实例 map.centerAndZoom(new BMap.Point(113.370171,23.129587), 15); // 初始化地图,设置中心点坐标和地图级别 //添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("广州"); // 设置地图显示的城市此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 ``` 如果你想去掉了百度地图的logo，可以在CSS中添加以下 ``` .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } ``` 这样就可以创建一个地图模块了！ #### 参数方法 | 返回值 | 描述 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b3) | 返回地图当前尺寸，以像素表示 | | getContainerSize() | [Size](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b3) | 获取地图容器尺寸 | | getZoomUnits() | Number | 返回当前地图级别，一个像素对应多少单位的平面墨卡托坐标 | | getContainer() | HTMLElement | 返回地图的DOM容器元素。当创建用户自定义控件时，需要自行实现Control.initialize()方法，并将控件的容器元素添加到地图上，通过此方法可获得地图容器 | | pixelToPoint(pixel: [Pixel ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b1)) | [Point](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0) | 像素坐标转换为经纬度坐标 | | pointToPixel(point: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)) | [Pixel](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b1) | 经纬度坐标转换为像素坐标 | | 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](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b2) | 获取地图当前视野范围的矩形区域，以地理坐标表示。如果地图尚未初始化则返回一个空的 `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 ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0), end: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)) | Number | 返回两点之间的距离，单位是米 | | getMapType() | [MapTypeId](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0) | 返回地图类型 | | setViewport(view: Array | [Viewport ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b3), viewportOptions: [ViewportOptions ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b4)) | none | 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标 | | getViewport(view: Array< [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)>, viewportOptions: [ViewportOptions ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b3)) | [Viewport](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b2) | 根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。此方法仅返回视野信息，不会将新的中心点和级别做用到当前地图上 | | centerAndZoom(center: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0), zoom: Number) | none | 设初始化地图。如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别 | | panTo(center: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)) | none | 将地图的中心点更改为给定的点，跳转到指定中心点进行渲染。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果 | | panBy(x: Number, y: Number) | none | 将地图在水平位置上移动x像素，垂直位置上移动y像素。如果指定的像素大于可视区域范围或者在配置中指定没有动画效果，则不执行滑动效果 | | flyTo(center: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0), zoom: Number) | none | 飞到指定的中心点和级别，提供给定位缩放地图使用 | | reset() | none | 重新设置地图，恢复地图初始化时的中心点和级别 | | setCenter(center: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)| String[, options: Object]) | none | 设置地图中心点。center除了可以为坐标点以外，还支持城市名。可选配置参数包括'noAnimation: boolean'是否禁用动画效果；'callback: function'动画结束后调用此方法，如果没有动画则立即调用 | | getCenter() | [Point](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0) | 返回地图当前中心点 | | setMapType(mapTypeId: [MapTypeId ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0)) | none | 设置地图类型 | | setZoom(zoom: Number[,options]) | none | 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。可选配置参数包括'noAnimation：boolean'是否禁用动画效果；'callback:function'动画结束后会调用此方法，如果没有动画则立即调用；'zoomCenter：Point'缩放中心点，默认以地图中心点为基准缩放 | | getZoom() | Number | 返回地图当前缩放级别 | | zoomIn() | none | 放大一级视图 | | zoomOut() | none | 缩小一级视图 | | addControl(control: [Control ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a2b0)) | none | 将控件添加到地图，一个控件实例只能向地图中添加一次 | | removeControl(control: [Control ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a2b0)) | none | 从地图中移除控件。如果控件从未被添加到地图中，则该移除不起任何作用 | | addContextMenu()(menu: [ContextMenu ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0)) | none | 添加右键菜单 | | removeContextMenu()(menu: [ContextMenu ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0)) | none | 移除右键菜单 | | addOverlay(overlay: [Overlay ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0)) | none | 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次 | | removeOverlay(overlay: [Overlay ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0)) | none | 从地图中移除覆盖物。如果覆盖物从未被添加到地图中，则该移除不起任何作用 | | clearOverlays() | none | 清除地图上所有覆盖物 | | pointToOverlayPixel(point: [Point ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0)) | [Pixel](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b1) | 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物 | | overlayPixelToPoint(pixel: [Pixel ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b1)) | [Point](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0) | 根据覆盖物容器的坐标获取对应的地理坐标 | | getOverlays() | Array< [Overlay ](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0)> | 获取当前地图上的所有覆盖物，返回覆盖物对象的集合 | | getPanes() | [MapPanes](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b1) | 返回地图覆盖物容器列表 | | 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](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a7b0)) | Number | 启动视角动画 | | cancelViewAnimation(viewAnimation: [ViewAnimation](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a7b0)) | 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