百度地圖 路線設置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>