vue中引入百度地图，并添加点线面，标注信息_vue 百度地图

vue引入百度地图

1.首先在public文件夹下得index.html文件中的head里面通过src引入百度api文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<link href="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
1
2
3
4

2.在需要用到百度地图的页面准备一个container容器，用来初始化地图

<div class="container" id="container" ref="containers">
1

3.在js里面写入初始化代码函数，并在mounted函数中进行回调

methods:{
    //初始化地图方法
	createBDmap() {
            var map = new BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
            map.centerAndZoom(new BMapGL.Point(114.xxx, 34.xxx), 15); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            this.map = map
        },
}
mounted(){
	//页面渲染时回调执行
	this.createBDmap()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

vue在百度地图中渲染点，线，面

1.添加一个点
1

	addMarker(data) { //date表示传进来的数据，包括坐标、图标、文字等信息
            let _this = this
            // this.addLabel(data)
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //自定义方法，对坐标进行过滤，弄成百度需要的格式。
            var myIcon = new BMapGL.Icon(data.iconUrl, new BMapGL.Size(25, 25)); //定义点位图标的样式大小，url地址，如不设置自动使用默认百度点样式
            var point = new BMapGL.Point(data.markBaiduLocation[0].markLongitude, data.markBaiduLocation[0].markLatitude);
            var marker = new BMapGL.Marker(point, {
                icon: myIcon
            });
            _this.map.addOverlay(marker); //添加点到地图上
            _this.addLabel(data.markBaiduLocation[0], data.title) //添加点的文字标注
            marker.addEventListener("click", function () { //为点添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.添加一条线
1

	addLine(data) { //date表示传进来的数据，包括坐标、图标、文字等信息
            let _this = this
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //与上述一样，对其坐标点进行过滤操作。（原数据字符格式，转化后为数组格式）
            var lineArray = [] // 线的点的集合
            data.markBaiduLocation.forEach(item => {
                lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
            })
            var polyline = new BMapGL.Polyline(lineArray, {
                strokeColor: "blue", //线条颜色
                strokeWeight: 6, //线条宽度
                strokeOpacity: 0.5, //边框透明度
                // strokeTexture: { // width/height 需要是2的n次方
                //     url: data.iconUrl,
                //     width: 16,
                //     height: 64
                // }, 
            });
            _this.map.addOverlay(polyline) //将绘制好的折线添加到地图上
            _this.addLabel(data.markBaiduLocation[1], data.title) //添加文字标注
            polyline.addEventListener("click", function () {//为线添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.添加一个多边形
1

	addGon(data) {
            let _this = this
            let array = [] //计算中心点方法需要的数组
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation)
            var lineArray = [] // 面的点的集合
            data.markBaiduLocation.forEach(item => {
                lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
            })
            data.markBaiduLocation.forEach((item) => {
                array.push([item.markLatitude, item.markLongitude])
            })
            let latArray = _this.mapGetCenter(array) //计算出中心点,用来将文字标注放置中心
            var polygon = new BMapGL.Polygon(lineArray, {
                strokeColor: "blue",
                strokeWeight: 2,
                strokeOpacity: 0.3,
                // strokeTexture: { // width/height 需要是2的n次方
                //     url: data.iconUrl,
                //     width: 16,
                //     height: 64
                // },
            });
            _this.map.addOverlay(polygon) //将绘制好的添加到地图上
            _this.addLabel01(latArray, data.title) //添加文字标注
            polygon.addEventListener("click", function () {//为线添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4.添加文字标注
1

	addLabel(data, title) {
            var _this = this
            let x = title.length * 10 / 2 + 5 //计算文字偏移量（这个可有可无，看具体情况，小小的美化罢了）
            var point = new BMapGL.Point(data.markLongitude, data.markLatitude);
            var content = title
            var label = new BMapGL.Label(content, {       // 创建文本标注
                position: point,                          // 设置标注的地理位置
                offset: new BMapGL.Size(-x, 15)           // 设置标注的偏移量
            })
            _this.map.addOverlay(label) //添加到地图上
            label.setStyle({                              // 设置label的样式
                color: '#000',
                fontSize: '14px',
                fontWeight: '600',
                border: '0'
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

vue在百度地图中手动绘制点，线，面

1.创建绘制工具
1

draw(e) { //传入绘制类型，eg:marker，polyline，polygon
            var _this = this
            //设置绘制工具样式
            var styleOptions = {
                strokeColor: '#5E87DB',   // 边线颜色
                fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
                strokeWeight: 2,          // 边线宽度，以像素为单位
                strokeOpacity: 1,         // 边线透明度，取值范围0-1
                fillOpacity: 0.2          // 填充透明度，取值范围0-1
            };
            var labelOptions = {
                borderRadius: '2px',
                background: '#FFFBCC',
                border: '1px solid #E1E1E1',
                color: '#703A04',
                fontSize: '12px',
                letterSpacing: '0',
                padding: '5px'
            };

            // 实例化鼠标绘制工具
            _this.drawingManager = new BMapGLLib.DrawingManager(_this.map, {
                // isOpen: true,        // 是否开启绘制模式
                enableCalculate: false, // 绘制是否进行测距测面
                enableSorption: true,   // 是否开启边界吸附功能
                sorptiondistance: 20,   // 边界吸附距离
                circleOptions: styleOptions,     // 圆的样式
                polylineOptions: styleOptions,   // 线的样式
                polygonOptions: styleOptions,    // 多边形的样式
                rectangleOptions: styleOptions,  // 矩形的样式
                labelOptions: labelOptions,      // label样式
            });
            switch (e) {
                case 'marker': {
                    _this.drawingType = BMAP_DRAWING_MARKER;
                    break;
                }
                case 'polyline': {
                    _this.drawingType = BMAP_DRAWING_POLYLINE;
                    break;
                }
                case 'polygon': {
                    _this.drawingType = BMAP_DRAWING_POLYGON;
                    break;
                }
            }
            // 进行绘制
            if (_this.drawingManager._isOpen && _this.drawingManager.getDrawingMode() === drawingType) {
                _this.drawingManager.close();
            } else {
                _this.drawingManager.setDrawingMode(_this.drawingType);
                _this.drawingManager.open();
            }
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2.监听绘制事件
1

	 // 监听绘制完成事件
            _this.drawingManager.addEventListener('overlaycomplete', function (e) {
                _this.drawingManager.close() // 成功后关闭绘制工具
                let type = e.drawingMode
                if (e.drawingMode === 'marker') {
                   //写入操作
                } else if (e.drawingMode === 'polyline') {
                    //写入操作
                } else if (e.drawingMode === 'polygon') {
                   //写入操作
                }
         }
1
2
3
4
5
6
7
8
9
10
11
12

以上内容就是在vue中添加点线面的所有方法，以及手动绘制的一些操作，如果还有疑惑的小伙伴，请移步至百度地图api中进行查看