百度地图引入到vue2项目中及一些细节

暴富暴富暴富啦啦啦

已于 2024-06-14 16:30:44 修改

阅读量1.5k

点赞数 1

文章标签：百度

于 2023-11-06 11:26:08 首次发布

本文链接：https://blog.csdn.net/szzlh123456789/article/details/134242500

版权

1.npm install vue-baidu-map --save

2.全局注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
     ak: '这个地方填你的ak密钥'  //这个地方是官方提供的ak密钥
})

3.开始使用

<baidu-map 
        id="allmap" 
        :center="{ lng: 113.65, lat: 34.76 }" 
        :zoom="10" 
        style="height: 830px; width: 100%"
        :scroll-wheel-zoom="true" 
        @ready="handler">
</baidu-map>

:center 中心点坐标

:zoom 放大倍数(最大19)

@ready="handler"直接调用 handler({ BMap, map })

添加标注

// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
//图标
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon(car, new BMap.Size(32,32));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);

vue项目实战：原生百度地图api的使用 - 蓝色帅-橙子哥 - 博客园 (cnblogs.com)

根据经纬度自己绘制出线路

handler({ BMap }) {
            var map = new BMap.Map("allmap", { minZoom: 1, maxZoom: 16 })
            var point = new BMap.Point(116.128554, 24.294562)
            // var top_left_navigation = new BMap.NavigationControl()
            // map.addControl(top_left_navigation)// 添加平移缩放控件
            // map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })) // 添加比例尺控件
            // map.addControl(new BMap.OverviewMapControl()) //添加缩略地图控件
            map.enableScrollWheelZoom()//启用滚轮放大缩小
            map.centerAndZoom(point, 1)
            var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT })
            map.addControl(bmp_type)

            var carMk;

            //显示车辆轨迹线
            //车辆轨迹坐标
            var latLngArray = [
                { lng: 120.4207801005104, lat: 36.10339957700999 },
                { lng: 120.42113539348455, lat: 36.10349055332635 },
                { lng: 120.42162977768736, lat: 36.10370795896673 },
                { lng: 120.42166901055167, lat: 36.10411490190429 },
                { lng: 120.42185015059275, lat: 36.104232027406695 },
                { lng: 120.42202022562539, lat: 36.10425620255758 },
                { lng: 120.42208225102176, lat: 36.104265908631284 },
                { lng: 120.42187425183421, lat: 36.104399968669526 },
                { lng: 120.42076268466177, lat: 36.10452708476511 },
                { lng: 120.4196557913201, lat: 36.10480132817409 },
                { lng: 120.418951386886, lat: 36.10560773716036 },
                { lng: 120.41900182905378, lat: 36.10621159088823 },
                { lng: 120.41992809616544, lat: 36.1064641068988 },
                { lng: 120.42102125032955, lat: 36.10679444086644 },
                { lng: 120.42182982905027, lat: 36.107010189089046 },
                { lng: 120.42193587265254, lat: 36.107014665948654 },
                { lng: 120.42201589513277, lat: 36.10700627324672 },
                { lng: 120.42236704579075, lat: 36.10708566579729 },
                { lng: 120.42269817692573, lat: 36.107201270041955 },
                { lng: 120.42239277578172, lat: 36.10812797579566 },
                { lng: 120.42175457671763, lat: 36.10947659586882 },
                { lng: 120.42144906678747, lat: 36.11028554037044 },
                { lng: 120.4213722360578, lat: 36.110547069787465 },
                { lng: 120.42134433787885, lat: 36.110691285540966 },
                { lng: 120.42234193234574, lat: 36.110931417305515 },
                { lng: 120.42374305054953, lat: 36.11109804633305 },
                { lng: 120.42478859440246, lat: 36.111102173671576 },
                { lng: 120.42606467439863, lat: 36.11129314178323 },
                { lng: 120.4274220550685, lat: 36.11148065963647 },
                { lng: 120.42831965719076, lat: 36.111638311669736 },
                { lng: 120.42839951065358, lat: 36.11164240198062 },
                { lng: 120.42869196887202, lat: 36.1116737914188 },
                { lng: 120.43031048017785, lat: 36.11190642360766 },
                { lng: 120.43239173942534, lat: 36.11229570404404 },
                { lng: 120.43368467575368, lat: 36.11281195352835 },
                { lng: 120.43371757862009, lat: 36.11284016439977 },
                { lng: 120.43379230066179, lat: 36.11284161798212 },
                { lng: 120.43441423254144, lat: 36.113205746094536 },
                { lng: 120.43549342023326, lat: 36.11391074053337 },
                { lng: 120.43637497341942, lat: 36.11441797319607 },
                { lng: 120.4365024200745, lat: 36.11445405475196 },
                { lng: 120.43670459776231, lat: 36.11458083085174 },
                { lng: 120.43745246924915, lat: 36.11507070008782 },
                { lng: 120.43821097991501, lat: 36.115416050767585 },
                { lng: 120.43823585473245, lat: 36.11541929557907 },
                { lng: 120.43859812511984, lat: 36.115583971494395 },
                { lng: 120.43901701857004, lat: 36.115714318017346 },
                { lng: 120.43928467292172, lat: 36.11582517772885 },
                { lng: 120.43959708522435, lat: 36.115963587312805 },
                { lng: 120.43986466921422, lat: 36.116047547858166 },
                { lng: 120.44007952157578, lat: 36.11611896447754 },
                { lng: 120.440167025596, lat: 36.11612294605039 },
                { lng: 120.440167025596, lat: 36.11612294605039 },
                { lng: 120.44024360205321, lat: 36.116138815526504 },
                { lng: 120.44026150723737, lat: 36.11614702160796 },
                { lng: 120.44027344364953, lat: 36.11615215895656 },
                { lng: 120.44028836484941, lat: 36.1161593311561 },
                { lng: 120.44034209724579, lat: 36.116201960713745 },
                { lng: 120.44048233691922, lat: 36.116254585044935 },
                { lng: 120.4405738257871, lat: 36.116276646228826 },
                { lng: 120.44073595695149, lat: 36.11635856195875 },
                { lng: 120.44115463412841, lat: 36.11652357056175 },
                { lng: 120.44118546544034, lat: 36.11653994619434 },
                { lng: 120.44121529948468, lat: 36.1165533090833 }
            ]

            var pois = [
                new BMap.Point(120.4207801005104, 36.10339957700999),
                new BMap.Point(120.42113539348455, 36.10349055332635),
                new BMap.Point(120.42162977768736, 36.10370795896673),
                new BMap.Point(120.42166901055167, 36.10411490190429),
                new BMap.Point(120.42185015059275, 36.104232027406695),
                new BMap.Point(120.42202022562539, 36.10425620255758),
                new BMap.Point(120.42208225102176, 36.104265908631284),
                new BMap.Point(120.42187425183421, 36.104399968669526),
                new BMap.Point(120.42076268466177, 36.10452708476511),
                new BMap.Point(120.4196557913201, 36.10480132817409),
                new BMap.Point(120.418951386886, 36.10560773716036),
                new BMap.Point(120.41900182905378, 36.10621159088823),
                new BMap.Point(120.41992809616544, 36.1064641068988),
                new BMap.Point(120.42102125032955, 36.10679444086644),
                new BMap.Point(120.42182982905027, 36.107010189089046),
                new BMap.Point(120.42193587265254, 36.107014665948654),
                new BMap.Point(120.42201589513277, 36.10700627324672),
                new BMap.Point(120.42236704579075, 36.10708566579729),
                new BMap.Point(120.42269817692573, 36.107201270041955),
                new BMap.Point(120.42239277578172, 36.10812797579566),
                new BMap.Point(120.42175457671763, 36.10947659586882),
                new BMap.Point(120.42144906678747, 36.11028554037044),
                new BMap.Point(120.4213722360578, 36.110547069787465),
                new BMap.Point(120.42134433787885, 36.110691285540966),
                new BMap.Point(120.42234193234574, 36.110931417305515),
                new BMap.Point(120.42374305054953, 36.11109804633305),
                new BMap.Point(120.42478859440246, 36.111102173671576),
                new BMap.Point(120.42606467439863, 36.11129314178323),
                new BMap.Point(120.4274220550685, 36.11148065963647),
                new BMap.Point(120.42831965719076, 36.111638311669736),
                new BMap.Point(120.42839951065358, 36.11164240198062),
                new BMap.Point(120.42869196887202, 36.1116737914188),
                new BMap.Point(120.43031048017785, 36.11190642360766),
                new BMap.Point(120.43239173942534, 36.11229570404404),
                new BMap.Point(120.43368467575368, 36.11281195352835),
                new BMap.Point(120.43371757862009, 36.11284016439977),
                new BMap.Point(120.43379230066179, 36.11284161798212),
                new BMap.Point(120.43441423254144, 36.113205746094536),
                new BMap.Point(120.43549342023326, 36.11391074053337),
                new BMap.Point(120.43637497341942, 36.11441797319607),
                new BMap.Point(120.4365024200745, 36.11445405475196),
                new BMap.Point(120.43670459776231, 36.11458083085174),
                new BMap.Point(120.43745246924915, 36.11507070008782),
                new BMap.Point(120.43821097991501, 36.115416050767585),
                new BMap.Point(120.43823585473245, 36.11541929557907),
                new BMap.Point(120.43859812511984, 36.115583971494395),
                new BMap.Point(120.43901701857004, 36.115714318017346),
                new BMap.Point(120.43928467292172, 36.11582517772885),
                new BMap.Point(120.43959708522435, 36.115963587312805),
                new BMap.Point(120.43986466921422, 36.116047547858166),
                new BMap.Point(120.44007952157578, 36.11611896447754),
                new BMap.Point(120.440167025596, 36.11612294605039),
                new BMap.Point(120.440167025596, 36.11612294605039),
                new BMap.Point(120.44024360205321, 36.116138815526504),
                new BMap.Point(120.44026150723737, 36.11614702160796),
                new BMap.Point(120.44027344364953, 36.11615215895656),
                new BMap.Point(120.44027344364953, 36.11615215895656),
                new BMap.Point(120.44028836484941, 36.1161593311561),
                new BMap.Point(120.44034209724579, 36.116201960713745),
                new BMap.Point(120.44048233691922, 36.116254585044935),
                new BMap.Point(120.4405738257871, 36.116276646228826),
                new BMap.Point(120.44073595695149, 36.11635856195875),
                new BMap.Point(120.44115463412841, 36.11652357056175),
                new BMap.Point(120.44118546544034, 36.11653994619434),
                new BMap.Point(120.44121529948468, 36.1165533090833),
            ]

            map.setViewport(latLngArray)

            // 设置折线的颜色
            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.6,//图标缩放大小
                strokeColor: '#fff',//设置矢量图标的线填充颜色
                strokeWeight: '2',//设置线宽
            });
            var icons = new BMap.IconSequence(sy, '10', '30');
            var polyline = new BMap.Polyline(pois, {
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: true,//是否响应点击事件，默认为true
                icons: [icons],
                strokeWeight: '8',//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor: "#91CAFF", //折线颜色
            });
            map.addOverlay(polyline);


            // 给终点和起点添加标注
            var p1 = new BMap.Point(120.4207801005104, 36.10339957700999)
            var p2 = new BMap.Point(120.44121529948468, 36.1165533090833)

            var myIcon = new BMap.Icon(cangKu, new BMap.Size(70, 50));
            var marker2 = new BMap.Marker(p1, { icon: myIcon });  // 创建标注
            var marker3 = new BMap.Marker(p2, { icon: myIcon });  // 创建标注
            map.addOverlay(marker2);
            map.addOverlay(marker3);

            // 当小车动的时候添加折线
            var i = 0;
            var interval = setInterval(function () {
                if (i >= latLngArray.length) {
                    clearInterval(interval);
                    return;
                }

                if (latLngArray[i + 1] != undefined) {
                    var polyline = new BMap.Polyline(
                        [
                            new BMap.Point(latLngArray[i].lng, latLngArray[i].lat),
                            new BMap.Point(latLngArray[i + 1].lng, latLngArray[i + 1].lat)
                        ],
                        {
                            strokeColor: "#4096FF",
                            strokeWeight: 7,
                            strokeOpacity: 1
                        });   //创建折线
                    map.addOverlay(polyline);

                    var myIcon = new BMap.Icon(car, new BMap.Size(70, 70), {    //小车图片
                        offset: new BMap.Size(0, -5),    //相当于CSS精灵
                        imageOffset: new BMap.Size(0, 0)    //图片的偏移量,为了是图片底部中心对准坐标点
                    });

                    if (carMk) {//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
                        map.removeOverlay(carMk);
                    }
                    // carMk.setRotation(this.getAngle(latLngArray[i + 1], latLngArray[i]) - 90);
                    carMk = new BMap.Marker(latLngArray[i + 1], { icon: myIcon });
                    map.addOverlay(carMk);
                }

                i = i + 1;
            }, 500);
        },