百度地图 路线设置marker，marker放上和离开添加事件显示，行走的路线

    addMarker (state, point,DateTime) {
      let img = this.driverRobImg[state];
      if (!state || !img || state == 6){
          let commonMarker = new BMap.Marker(point)
          let label = new BMap.Label(DateTime,{offset:new BMap.Size(20,-10)});
          // 放上去显示，移走不显示
          commonMarker.addEventListener('mouseover',function () {
              label.setStyle({
                  display:"block",
                  border:"none",
              });
              commonMarker.setLabel(label);
          }) // 6483925
          commonMarker.addEventListener('mouseout',function () {
              label.setStyle({
                  display:"none",
              });
              commonMarker.setLabel(label);
          })
          // 一直都显示
          // label.setStyle({
          //     border:"none",
          //     height:"30px",
          //     width:"130px",
          //     textAlign:"center",
          //     lineHeight:"30px"
          // });
          // commonMarker.setLabel(label);
          return this.map.addOverlay(commonMarker);
      }

 

公路线实现

行走的路线 

效果图：

代码:

<template>
  <div>
    <div id="map" style="width: 800px;height: 800px;margin: auto"></div>
  </div>
</template>
<script>
  import BMap from 'BMap'
  export default {
    data() {
      return {
        map : "",
      }
    },
    methods: {
      createMap () {
        /* eslint-disable */
        // 创建Map实例 这里边的map就是id="map"
        var map = new BMap.Map("map")
        this.map = map
        // 初始化地图,设置中心点坐标和地图级别
        // 这个可以使用定位显示，我的电脑显示有问题，一般异步是很快的
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 18)
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        }))
        // 设置地图显示的城市 此项是必须设置的
        map.setCurrentCity("北京")
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
      },
      // 获取两点间得坐标点集合
      getRouteLinePoints (start, end) {
        return new Promise((resolve, reject) => {
          if (!end) return resolve([start]);
          let walkingRoute = new BMap.WalkingRoute(this.map, {
            onSearchComplete: function (res) {
              if (walkingRoute.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0);
                for (var j = 0; j < plan.getNumRoutes(); j++) {
                  var route = plan.getRoute(j)
                  // resolve(route.getPath().slice(1));
                    resolve(route.getPath())
                }
              } else {
                resolve([start, end]);
              }
            }
          })
          walkingRoute.search(start, end)
        })
      },
      // 画线
      drawLines (arr) {
        let points = [];
        arr.map(item =>  {
          points = points.concat(item);
        })
        // 画灰线
        this.map.addOverlay(new BMap.Polyline(points, {
          // strokeColor: '#b9b9b9',
          strokeColor: '#8cA2ff',
          // strokeWeight: '5',
          strokeWeight: '10',
          strokeOpacity: 1
        }))
        // 画点线
        this.map.addOverlay(new BMap.Polyline(points, {
          strokeColor: '#eaeaea',
          strokeWeight: '2',
          strokeStyle: 'dashed',
          strokeOpacity: 1
        }))
        this.map.setZoom(20)
        //根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
        // 也就是说如果你的路线比较大，地图上没有显示出来，则会自动调整放大，让路线完全显示出来
        this.map.setViewport(points)
      },
    },
    mounted () {
        this.createMap()
        //  116.403424,39.916485    116.403865,39.915523
        //  116.403438,39.916488    116.403824,39.915609
        let startPoint = new BMap.Point(116.403438,39.916488 )
        let endPoint = new BMap.Point(116.403824,39.915609)
        Promise.all([this.getRouteLinePoints(startPoint,endPoint)]).then(res=>{
            if(res){
                this.drawLines(res);
            }
        })
    }
  }
</script>