百度地图api vue集成模板收录

<!--
    @Author: bijiahao
    @Description: 百度地图组件
    @Date: 2021/2/1 16:51
-->
<template>
  <div class="map-warp" id="vehicleBaiduMap" style="margin:0 auto;width: 1200px;height:600px;">

  </div>
</template>


<script>

  export default {
    name: "BaiDuMap",
    components: {

    },
    props:{
      points:Array,
    },
    data() {
      return {

      }
    },
    methods: {
      addBaiduMap(point) {
        point.sort(function(item1,item2){
          if(item1.collectorDHM>item2.collectorDHM){
            return 1;
          }else if(item1.collectorDHM<item2.collectorDHM){
            return -1
          }else{
            return 0
          }
        })


        point = point.splice(0,27)
        var arr = [
          [113.64551856713466,34.31032368983964],
          [113.64546466880405,34.310010601362784],
          [113.64548263491426,34.30956333006614],
          [113.64546466880405,34.30896696459663],
          [113.64544670269386,34.30850477841738],
          [113.64544670269386,34.308027680313295],
          [113.64541077047346,34.30741639436903],
          [113.64544670269386,34.30634290574433],
          [113.64542873658365,34.30582106599331],
          [113.64539280436325,34.30525449341502],
          [113.64479992272668,34.30568687809974],
          [113.64496161771847,34.30631308641816],
          [113.64494365160827,34.30714802351135],
          [113.64501551604907,34.30796804285791],
          [113.64501551604907,34.30872841721183],
          [113.64501551604907,34.30941423909955],
          [113.64503348215926,34.30986151119776],
          [113.64506941437966,34.310219327144935],
          [113.64451246496348,34.31024914507107],
          [113.64451246496348,34.309757147923264],
          [113.64451246496348,34.30926514786577],
          [113.64447653274308,34.30872841721183],
          [113.64444060052269,34.308146955095815],
          [113.64451246496348,34.307684764361035],
          [113.64458432940428,34.30705856636643],
          [113.64456636329408,34.3062832670813],
          [113.64453043107368,34.30580615623804]]
        for(var i=0;i<27;i++){
          point[i].longitude =arr[i][0]
          point[i].latitude =arr[i][1]
        }
        var bmap = new BMapGL.Map('vehicleBaiduMap'); // 创建Map实例



        bmap.centerAndZoom(new BMapGL.Point(point[0].longitude,point[0].latitude), 20); // 初始化地图,设置中心点坐标和地图级别
        bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var myIcon = new BMapGL.Icon("./img/car.png", new BMapGL.Size(25, 25));
        /*添加点*/
        point.forEach(function (item) {
          var pointDex = new BMapGL.Point(item.longitude, item.latitude)
          var marker1 = new BMapGL.Marker(pointDex,{
            icon:myIcon
          });
          bmap.addOverlay(marker1);
          // 创建信息窗口


          var scontent = "<h4 style='margin:0px 0 5px 0;'>详细信息</h4>\n" +
            "        车速:"+item.speed+"<br>\n" +
            "        转速:"+item.rotationalSpeed+"<br>\n" +
            "        海拔:"+item.elevation+"<br>\n" +
            "        采集时间:"+item.collectorDHM+"<br>\n" +
            "        发动机水温:"+item.waterTemperature+"<br>\n" +
            "        累积工作时间:"+item.engineCumulativeWorkingHors+"<br>\n" +
            "        环境温度:"+item.environmentTemperature+"";
          var infoWindow = new BMapGL.InfoWindow(scontent);
          marker1.addEventListener('click', function () {
            bmap.openInfoWindow(infoWindow, pointDex); // 开启信息窗口
          })
        })

        /*创建路线图*/
        var points = [];
        for (var i = 0; i < point.length; i++) {
          points.push(new BMapGL.Point(point[i].longitude, point[i].latitude));
        }
        var pl = new BMapGL.Polyline(points);
        setTimeout(function star(){
          var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
            overallView: true,
            tilt: 30,
            duration: 10000,
            delay: 300
          });
          trackAni.start();
        }, 3000);

      }

    },
    mounted(){
      this.addBaiduMap(this.points)
    }
  }
</script>

<style>
  .map {
    width: 100%;
    height: 400px;
  }
</style>