VUE + 百度地图 实现1.定位 2.点击点展示信息 3.电子围栏4.运动轨迹

实现效果如下：

1、安装 

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

2、全局注册，在main.js中引入以下代码

1 2 3 4

import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, {   ak: '你申请的key' })

3、界面

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:100%" :scroll-wheel-zoom='true' > 
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- 遍历多个点坐标 -->
        <template v-for="(items, index) in markers">
            <bm-marker :key="index" :position="items.markerPoint" @click="look(items)" animation="BMAP_ANIMATION_DROP"></bm-marker>
        </template>
        <!-- 信息窗体 -->
        <bm-info-window :position="position" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
            <div style="width:300px;display:flex;justify-content: space-between;padding-top:12px;">
                <div>
                    <div class="font">耳标号：</div>
                    <div class="font2">{{from.animalRecordName||'--'}}</div>
                    <div class="font">坐标：</div>
                    <div class="font2">{{from.markerPoint.lng||'--'}},{{from.markerPoint.lat||'--'}}</div>
                    <div class="font">定位时间: </div>  
                    <div class="font2">{{from.positionDate}}</div>  
                </div>
                <div>
                    <div>
                        <el-avatar style="height:180px;width:130px" src="" shape="square" >
                            <img :src="from.photo"/>
                        </el-avatar>
                    </div>
                </div>
            </div>
            <div style="display:flex;">
                <div style="padding-top: 8px;"><el-link @click="relocation()"><i class="el-icon-refresh-left font" >&nbsp;刷新定位</i></el-link></div>
                <div class="path" v-show="polyline== null" >
                    <el-link @click="path(from.animalRecordName)"><i class="el-icon-s-promotion"></i>&nbsp;查看历史轨迹</el-link>
                </div>
                <div class="path" v-show="polyline!= null">
                    <el-link @click="deletepath()"><i class="el-icon-s-release"></i>&nbsp;清除历史轨迹</el-link>
                </div>
            </div>
        </bm-info-window>
    </baidu-map>
</template>
<script>
  export default {
    name: 'location',
    data() {
        return {
            center: {lng: 0, lat: 0},
            zoom: 8,
            locationData:[],
            pathData:[],
            markers: [{
                animalRecordName: "--",
                markerPoint: { lng: 0, lat: 0 },
                photo:"",
                positionDate:"--"
            }],
            position: {},
            show : false,
            from:{animalRecordName:"",markerPoint:{},photo:"",positionDate:""},
            map:null,
            polyline:null,
            date:new Date()
        }
    },
    mounted(){
    },
    methods: {
        handler ({BMap, map}) {
                this.map = map;
                this.axios({ 
                    url:'/api/Admin/Position/GetOnlinePositionList',
                    method:'get',
                    params:{}
                }).then(res => {
                    this.locationData = res.data.data;
                    var point = new BMap.Point(101.811539,34.624356)//创建点坐标
                    map.centerAndZoom(point, 17)//初始化地图,设置中心点坐标和地图级别
                    map.enableScrollWheelZoom(); // 支持鼠标滚轮放大缩小 
                    //1.打点定位 
                    //循环显示点对象
                    for (var i = 0; i < this.locationData.length; i++) {
                        var list = {
                            animalRecordName: this.locationData[i].animalRecordName,
                            markerPoint: { lng: this.locationData[i].longitude, lat: this.locationData[i].latitude },
                            photo : this.locationData[i].photo,
                            positionDate: this.locationData[i].positionDate
                        };
                        this.markers.push(list);
                        var point = new BMap.Point(this.locationData[i].longitude,this.locationData[i].latitude)
                        var marker = new BMap.Marker(point) // 创建标注
                        map.addOverlay(marker) // 将标注添加到地图中
                        // var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
                        // map.addOverlay(circle)
                    }
                    //2.绘制电子围栏
                    // 绘制面
                    var polygon = new BMap.Polygon([
                        new BMap.Point(101.806139,34.620423),
                        new BMap.Point(101.817027,34.620542),
                        new BMap.Point(101.819291,34.628889),
                        new BMap.Point(101.80596,34.628473)
                    ], {
                       strokeColor:"red", strokeWeight:1, strokeOpacity:0.0, fillOpacity: 0.0, fillColor: "none"
                    });
                    map.addOverlay(polygon);
                })
        },
        // 关闭窗体
        infoWindowClose () {
            this.show = false
        },
        // 打开窗体
        infoWindowOpen () {
            this.show = true
        },
        look(items) {
            this.from = items
            console.log(this.from,"from")
            this.position = items.markerPoint;
            this.show = true;
        },
        path(k){
            this.axios({ 
                    url:'/api/Admin/Position/GetOnlinePositionList',
                    method:'get',
                    // params:{key:k}
                    params:{key:k,start:this.dateFormat(new Date().getTime()-24*60*60*1000),end:this.dateFormat(new Date())}
                }).then(res => {
                    this.pathData = res.data.data;
                     //循环显示轨迹
                    let arr=[]; 
                    for (var i = 0; i < this.pathData.length; i++) {
                        arr.push(new BMap.Point(this.pathData[i].longitude,this.pathData[i].latitude))
                    }
                    this.polyline = new BMap.Polyline(arr, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
                    this.map.addOverlay(this.polyline);
                    this.show = false;
                })
            // console.log(this.polyline,"查看")
        },
        deletepath(){
            this.map.removeOverlay(this.polyline);
            this.show = false;
            this.polyline = null;
            // console.log(this.polyline,"清除")
        },
        relocation(){
            const loading = this.$loading({           // 声明一个loading对象
                lock: true,                             // 是否锁屏
                text: '正在加载...',                     // 加载动画的文字
                spinner: 'el-icon-loading',             // 引入的loading图标
                background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
                target: '.sub-main',                    // 需要遮罩的区域
                body: true,                              
                customClass: 'mask'                     // 遮罩层新增类名
            })
            setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
                loading.close();                        // 关闭遮罩层
            },500)
            let map = this.map;
            this.handler({BMap,map});
        },
        //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
        dateFormat(time) {
            var date=new Date(time);
            var year=date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             * */
            var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
            var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
            var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
            var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
            var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
            // 拼接
            return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        }
  }
}
</script>
<style scoped>
.font{
    font-size:14px;
    font-family: '微软雅黑';
    font-weight: 600;
    height: 25px;
    line-height: 30px;
    padding-left: 8px;
}
.font2{
    font-size:14px;
    /* font-weight: 600; */
    height: 25px;
    line-height: 30px;
    padding-left: 8px;
}
.path{
    font-size:12px;
    font-family: '微软雅黑';
    font-weight: 600;
    height: 20px;
    line-height: 40px;
    padding-left: 115px;
}
</style>