Vue+百度地图学习笔记

百度地图的接入

注册并申请百度地图的key

引入百度地图的js文件

全局引入复制代码

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥" type="text/javascript"></script>

这种方法引入的地图js为全局引入，会导致项目的每一个组件都会加载该 js，尤其在不需要加载百度地图的页面，会造成很大的性能损耗；而在首页不需要百度地图时，百度地图加载缓慢，会造成很长的白屏时间，因此需要优化一下引入地图 js 的方法。

在需要引入 js 的页面，创建script元素，设置 src 属性，并插入，这样就会只在该页面中引入百度地图 js。

2.loadjs引入

loadJS('api.map.baidu.com/api?v=1.0&&...', callback)

引入完成后，在Vue项目中就可以使用百度地图的变量 "BMapGL"

百度地图的使用

1.初始化一个地图实例

新建Map.vue文件，创建一个map容器并赋予宽高(必须要有宽和高)，按照如下方式即可初始化一个百度地图

百度地图js全局引入复制代码

<template> 
    <div id="map"></div> 
</template>
<script lang="ts" setup>
import {onMounted} from 'vue'

//声明地图变量
var map
//let map=[]
const initMap=()=>{
    // 创建实例
    map = new BMapGL.Map('map');
    // 设置地图中心以及缩放级别
    const lnglat = new BMapGL.Point(116.40769, 39.89945)
    map.centerAndZoom(lnglat, 12);
}
onMounted(()=>{
    initMap();
})
</script>
<style scoped>
#map {
    width: 100%;
    height: 88vh;
}
</style>

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)事件

①点击事件

在初始化的方法中，加入事件。

arduino 复制代码

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)
    })
}

②地图缩放结束事件

typescript 复制代码

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](#属性属性类型描述 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上的显示内容 "#a1b3") | 标注的位置偏移值 |
| icon | [Icon](#属性属性类型描述 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上的显示内容 "#a3b4") | 标注所用的图标对象 |
| 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<Point>,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<Point>,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)添加信息窗口

arduino 复制代码

//地图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=`<div>
            <p>单位名称：${item.name}</p>
            <p>联系电话：${item.phone}</p>
            <p>单位地址：${item.address}</p>
            </div>`
    const infoWindow = new BMapGL.InfoWindow(html,opts);
    map.openInfoWindow(infoWindow, data.latlng); // 开启信息窗口
})

(4)清除覆盖物

①清除所有

ini 复制代码

const removeOverlay=()=>{
  map.clearOverlays();
}

②清除指定覆盖物

想要清除多个时，需要用把覆盖物放在数组里，然后循环清除

arduino 复制代码

// 创建一个标记 
const ponit = new BMap.Point(104.072242, 30.663711) 
const marker = new BMap.Marker(ponit) 
map.addOverlay(marker) 
// 清除一个标记 
map.removeOverlay(marker)

③清除路书中的icon(未亲手实现)

arduino 复制代码

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); 
    } 
});