## 百度地图的接入 #### 注册并申请[百度地图](https://link.juejin.cn/?target=https://lbsyun.baidu.com/apiconsole/key#/home "https://lbsyun.baidu.com/apiconsole/key#/home")的key ##### 引入百度地图的js文件 ```全局引入 ``` 这种方法引入的地图js为全局引入，会导致项目的每一个组件都会加载该 js，尤其在不需要加载百度地图的页面，会造成很大的性能损耗；而在首页不需要百度地图时，百度地图加载缓慢，会造成很长的白屏时间，因此需要优化一下引入地图 js 的方法。在需要引入 js 的页面，创建script元素，设置 src 属性，并插入，这样就会只在该页面中引入百度地图 js。 ###### 2.loadjs引入 loadJS('https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的秘钥', callback) ###### 引入完成后，在Vue项目中就可以使用百度地图的变量 "BMapGL" ## 百度地图的使用 #### 1.初始化一个地图实例新建Map.vue文件，创建一个map容器并赋予宽高(必须要有宽和高)，按照如下方式即可初始化一个百度地图 ```百度地图js全局引入 ``` #### 2.配置地图类型 ```配置地图类型 const initMap=()=>{ // 创建实例 map = new BMapGL.Map('map', //地图属性对象,参考百度地图JSAPI WebGLS v1.0核心类的MapOptions类的属性,除enableAutoResize自适应底图容器变化外其余属性均可使用Map类中的方法进行设置 { //地图允许展示的最小级别 minZoom:10, //地图允许展示的最大级别 maxZoom:16, //地图类型默认为BMAP_NORMAL_MAP，类型参数参考MapTypeId mapType:BMAP_NORMAL_MAP, //自适应底图容器变化，默认开启 enableAutoResize:true, } ); // 设置地图中心以及缩放级别 const lnglat = new BMapGL.point(116.40769, 39.89945) map.centerAndZoom(lnglat, 12); // 设置地图类型 map.setMapType(TMAP_SATELLITE_MAP); } ``` 地图类型参考 **常量** | **描述** | | ----------------------- | ------------------ | | BMAP_NORMAL_MAP | 此地图类型展示普通街道视图。 | | BMAP_EARTH_MAP | 此地图类型展示地球卫星视图。 | #### 3.基本地图操作对百度地图进行初始化完成，并把实例赋值给map，然后就可以使用map来调用百度地图的方法。 ##### (1)事件 ###### ①点击事件在初始化的方法中，加入事件。 ``` const initMap=()=>{ // 创建实例 map = new BMapGL.Map('map'); // 设置地图中心以及缩放级别 const lnglat = new BMapGL.point(116.40769, 39.89945) map.centerAndZoom(lnglat, 12); // 设置地图类型 map.setMapType(BMAP_NORMAL_MAP); //click点击事件，latlng包含经纬度 map.addEventListener('click', (data) => { console.log(data.latlng) }) } ``` ###### ②地图缩放结束事件 ``` const initMap=()=>{ // 创建实例 map = new BMapGL.Map('map'); // 设置地图中心以及缩放级别 const lnglat = new BMapGL.point(116.40769, 39.89945) map.centerAndZoom(lnglat, 12); // 设置地图类型 map.setMapType(BMAP_NORMAL_MAP); //click点击事件，latlng包含经纬度 map.addEventListener('click', (data) => { console.log(data.latlng) }) //缩放结束事件 map.addEventListener("zoomend", (type) => { }) } ``` ##### (2)创建覆盖物（点、线、面） ```点覆盖物 // 添加图标 const myIcon = new BMapGL.Icon("/src/components/datav/img/date-icon.png", new BMapGL.Size(25, 25)); //SVG矢量图标,使用矢量图标时禁用setMapType设置地图类型为BMAP_EARTH_MAP卫星地图，否则图标闪现消失 //SVGSymbol(path:String|SymboShapeType,opts:SymbolOptions) const svgIcon=new BMapGL.SVGSymbol("m0,-10c-0.20885,0 -0.39491,0.08583 -0.55177,0.24149c-0.15674,0.15536 -0.28646,0.37838 -0.39429,0.65665c-0.21586,0.55655 -0.34853,1.33844 -0.42114,2.27477c-0.07231,0.93446 -0.08474,2.02273 -0.05447,3.18765c-2.58175,1.05925 -7.81787,3.24648 -8.23854,3.73474c-0.56001,0.65029 -0.37908,1.3954 -0.15331,1.89002l8.608,-1.75235c0.18202,2.28374 0.4407,4.5455 0.66615,6.31771c-0.8418,0.24646 -2.41323,0.73303 -2.73754,1.03474c-0.4469,0.41562 -0.4469,1.75793 -0.4469,1.75793l3.52318,-0.28665c0.08286,0.57874 0.13486,0.9163 0.13486,0.9163l0.00511,0.03042l0.02778,0l0.06486,0l0.02778,0l0.00511,-0.03042c0,0 0.05185,-0.33756 0.13486,-0.9163l3.52424,0.28665c0,0 0,-1.34231 -0.44688,-1.75793c-0.32446,-0.30172 -1.89697,-0.7895 -2.73847,-1.0358c0.22484,-1.76681 0.4832,-4.02001 0.66507,-6.29634l8.50712,1.73203c0.22561,-0.49462 0.40765,-1.23973 -0.15237,-1.89002c-0.41538,-0.48221 -5.52504,-2.62071 -8.1386,-3.69423c0.03119,-1.17999 0.01971,-2.28285 -0.05353,-3.22816l0,-0.00233c-0.07263,-0.93523 -0.20545,-1.71635 -0.42114,-2.27244c-0.10784,-0.27827 -0.23634,-0.50114 -0.3932,-0.65665c-0.15689,-0.15567 -0.34293,-0.24149 -0.55195,-0.24149l0,0l0,0l0,0l0.00001,0l0,0l-0.00003,0.00001z", { fillColor: '#E4F4F4', fillOpacity: 0.8, scale: 3, rotation: 0, strokeOpacity: 1 }); // 创建点 const markerPoint=new BMapGL.Point(116.75834780679153, 36.19520029907428); // 创建标记,Marker(point:Point,opts:MarkerOptions) const marker=new BMapGL.Marker( markerPoint, { // 图标 icon:myIcon, // 拖拽 enableDragging:true, } ) //地图标点 const addMarker=(point,opts)=> { // 创建点 let markerPoint = point // 创建标记 const marker = new BMapGL.Marker(markerPoint,opts) // 在地图上添加点标记 map.addOverlay(marker) } ```

SymbolShapeType

此枚举类型表示矢量图标类预设的图标样式。

常量
常量	描述
BMap_Symbol_SHAPE_CIRCLE	圆形，默认半径为1px
BMap_Symbol_SHAPE_RECTANGLE	矩形，默认宽度4px、高度2px
BMap_Symbol_SHAPE_RHOMBUS	菱形，默认外接圆半径10px
BMap_Symbol_SHAPE_STAR	五角星，五角星外接圆半径为10px
BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW	箭头方向向下的闭合箭头
BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW	箭头方向向上的闭合箭头
BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW	箭头方向向下的非闭合箭头
BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW	箭头方向向上的非闭合箭头
BMap_Symbol_SHAPE_POINT	定位点图标
BMap_Symbol_SHAPE_PLANE	预设的飞机形状
BMap_Symbol_SHAPE_CAMERA	预设的照相机形状
BMap_Symbol_SHAPE_WARNING	预设的警告符号
BMap_Symbol_SHAPE_SMILE	预设的笑脸形状
BMap_Symbol_SHAPE_CLOCK	预设的钟表形状

SymbolOptions

此类表示Symbol构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性
属性	类型	描述
anchor	Size	符号的位置偏移值
fillColor	string	设置矢量图标的填充颜色。支持颜色常量字符串、十六进制、RGB、RGBA等格式
fillOpacity	Number	设置矢量图标填充透明度,范围0~1
scale	Number	设置矢量图标的缩放比例
rotation	Number	设置矢量图标的旋转角度,参数为角度
strokeColor	string	设置矢量图标的线填充颜色,支持颜色常量字符串、十六进制、RGB、RGBA等格式
strokeOpacity	Number	设置矢量图标线的透明度,opacity范围0~1
strokeWeight	Number	设置线宽。如果此属性没有指定，则线宽跟scale数值相同

MarkerOptions

此类表示Marker构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性
属性	类型	描述
offset	Size	标注的位置偏移值
icon	Icon	标注所用的图标对象
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableDragging	Boolean	是否启用拖拽，默认为false
enableClicking	Boolean	是否响应点击事件。默认为true
raiseOnDrag	Boolean	拖拽标注时，标注是否开启离开地图表面效果。默认为false
draggingCursor	String	拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
rotation	Number	旋转角度
title	String	鼠标移到marker上的显示内容

```线覆盖物 // 定义折线点 const polylinePoints=[ new BMapGL.Point(116.75834780679153, 36.19520029907428), new BMapGL.Point(116.77322571371086, 36.19556822413805), new BMapGL.Point(116.78732268329571, 36.19521146791698), ]; // 创建折线,Polyline(points:Array,opts:PolylineOptions) const polyline=new BMapGL.Polyline(linePoints,{ // 颜色 strokeColor: "blue", // 宽度 strokeWeight: 2, // 透明度 strokeOpacity: 1, } ) ```

PolylineOptions

此类表示Polyline构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性
属性	类型	描述
strokeColor	String	折线颜色
strokeWeight	Number	折线的宽度，以像素为单位
strokeOpacity	Number	折线的透明度，取值范围0 - 1
strokeStyle	String	折线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true
geodesic	Boolean	是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false
clip	Boolean	是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true

```多边形覆盖物 // 定义多边形顶点 const polygonPoints=[ new BMapGL.Point(116.75834780679153, 36.19520029907428), new BMapGL.Point(116.77322571371086, 36.19556822413805), new BMapGL.Point(116.78732268329571, 36.19521146791698), ]; // 创建折线,Polygon(points:Array,opts:PolygonOptions) const polygon=new BMapGL.Polygon(polygonPoints,{ // 颜色 strokeColor: "red", // 宽度 strokeWeight: 2, // 透明度 strokeOpacity: 1, } ) ```

PolygonOptions

此类表示Polygon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性
属性	类型	描述
strokeColor	String	边线颜色
fillColor	String	填充颜色。当参数为空时，折线覆盖物将没有填充效果
strokeWeight	Number	边线的宽度，以像素为单位
strokeOpacity	Number	边线透明度，取值范围0 - 1
fillOpacity	Number	填充的透明度，取值范围0 - 1
strokeStyle	String	边线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true

```圆形覆盖物 // 定义圆心 const circlePoint=new BMapGL.Point(116.77354496884897, 36.20240513146036); // 创建圆区,Circle(point:Point,radius:number,opts:CircleOptions) const circle=new BMapGL.Circle( circlePoint, 50, { // 颜色 strokeColor: "yellow", // 宽度 strokeWeight: 2, // 透明度 strokeOpacity: 1, } ) ```

CircleOptions

Circle类构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性
属性	类型	描述
strokeColor	String	圆形边线颜色
fillColor	String	圆形填充颜色。当参数为空时，圆形将没有填充效果
strokeWeight	Number	圆形边线的宽度，以像素为单位
strokeOpacity	Number	圆形边线透明度，取值范围0 - 1
fillOpacity	Number	圆形填充的透明度，取值范围0 - 1
strokeStyle	String	圆形边线的样式，solid或dashed
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	Boolean	是否启用线编辑，默认为false
enableClicking	Boolean	是否响应点击事件，默认为true

```添加覆盖物 const initMap=()=>{ map = new BMapGL.Map('Bmap'); const lnglat = new BMapGL.Point(116.77250997300130, 36.195647954040385) map.centerAndZoom(lnglat, 16); map.enableScrollWheelZoom(); // 点覆盖物 map.addOverlay(marker) // 线覆盖物 map.addOverlay(polyline) // 多边形覆盖物 map.addOverlay(polygon) // 圆形覆盖物 map.addOverlay(circle) } ``` ##### (3)添加信息窗口 ``` //地图click点击事件，latlng包含了经纬度 map.addEventListener('click', (data) => { console.log(data.latlng) // 创建信息窗口 const opts = { width: 200, height: 100, title: '基本信息' }; const infoWindow = new BMapGL.InfoWindow('地址：xxxxxx',opts); map.openInfoWindow(infoWindow, data.point); // 开启信息窗口 }) const item=reactive({ name:"xxxxx", phone:"176xxx8557", address:"xxxxxxx", }) //标记click点击事件 marker.addEventListener('click', (data) => { console.log(data.latlng) // 创建信息窗口 const opts = { width: 200, height: 100, title: '基本信息' }; const html=`

单位名称：${item.name}

联系电话：${item.phone}

单位地址：${item.address}

` const infoWindow = new BMapGL.InfoWindow(html,opts); map.openInfoWindow(infoWindow, data.latlng); // 开启信息窗口 }) ``` ##### (4)清除覆盖物 ###### ①清除所有 ``` const removeOverlay=()=>{ map.clearOverlays(); } ``` ###### ②清除指定覆盖物想要清除多个时，需要用把覆盖物放在数组里，然后循环清除 ``` // 创建一个标记 const ponit = new BMap.Point(104.072242, 30.663711) const marker = new BMap.Marker(ponit) map.addOverlay(marker) // 清除一个标记 map.removeOverlay(marker) ``` ###### ③清除路书中的icon(未亲手实现) ``` const moveMarker = new BMap.Icon( img, { widht: 30, height: 36 }, { anchor: new BMap.Size(15, 36) } ); // 加入一个自定id并赋值 moveMarker.id = "123456"; // 创建路书 const lushu = new BMapLib.LuShu(this.centerMap, point, { defaultContent: "标题", icon: moveMarker, // 米/秒 speed: 300, // 是否自动调整视野 autoView: false, // 是否开启走路旋转 enableRotation: false, landmarkPois: [], }); // 获取当前地图上所有的覆盖物 const overlays = this.map.getOverlays(); overlays.forEach((item) => { // 循环寻找上面添加的指定id（属性较多，而且可能不一定是K这个变量，需要仔细找一下） if (item.K && item.K.Be && item.K.Be.id === "123456") { this.map.removeOverlay(item); } }); ```