百度地图路线规划

在index.html 引入百度js：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oFTO1bTNSufnac1ZYSZlNt9GDDwgForl"></script>

map页面

<template>
    <div class="mapPage">
      <nav class="clearfix roadType">
        <div class="fl" @click="bus()">公交</div>
        <div class="fl" @click="car()">驾车</div>
        <div class="fl" @click="walk()">步行</div>
      </nav>
      <div id="allmap"></div>
     <div class="backBtn">
       <a href="javascript:;" @click="$router.go(-1)">返回</a>
       <!--<a class="fr" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.baidu.BaiduMap">地图导航</a>-->
     </div>
    </div>
</template>

<script>
    export default {
      name: "map",
      data () {
        return{
          address:{},
          ad_lng:'',
          ad_lat:'',
          self_lng:'',
          self_lat:''
        }
      },
      created () {
        this.address = JSON.parse(localStorage.getItem('address')) || {};
      },
      mounted: function() {
        this.initMap();
      },
      methods:{
        initMap: function() {
          this.createMap(); //创建地图
          this.getlocation(); //获取定位
          this.setMapEvent();//设置地图事件
          this.addMapControl();//向地图添加控件
          this.addGeo();//获取网点地址
        },
        createMap: function(){
          var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
          var point = new BMap.Point(120.328033,31.686802);//定义一个中心点坐标
          map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
          window.map = map;//将map变量存储在全局
        },
        setMapEvent: function(){
          map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
          map.enableScrollWheelZoom();//启用地图滚轮放大缩小
          map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
          map.enableKeyboard();//启用键盘上下左右键移动地图
        },
        addMapControl: function(){
          //向地图中添加缩放控件
          var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
          map.addControl(ctrl_nav);
        },
        addGeo: function(){
          var _this = this;
          // 创建地址解析器实例
          var myGeo = new BMap.Geocoder();
          // 将地址解析结果显示在地图上,并调整地图视野
          myGeo.getPoint(_this.address.address, function(point){
            if (point) {
              map.centerAndZoom(point, 16);
              map.addOverlay(new BMap.Marker(point));
              _this.ad_lng = point.lng;
              _this.ad_lat = point.lat;
            }else{
              alert("您选择地址没有解析到结果!");
            }
          }, "深圳市");
        },
        getlocation: function(){
          var _this = this;
          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
              var mk = new BMap.Marker(r.point);
              map.addOverlay(mk);
              map.panTo(r.point);
              _this.self_lng = r.point.lng;
              _this.self_lat = r.point.lat;
            }else {
              // alert('failed'+this.getStatus());
            }
          },{enableHighAccuracy: true})
        },
        bus:function () {
          var p1 = new BMap.Point(this.self_lng,this.self_lat);
          var p2 = new BMap.Point(this.ad_lng,this.ad_lat);
          var transit = new BMap.TransitRoute(map, {
            renderOptions: {map: map}
          });
          map.clearOverlays();
          transit.search(p1, p2);
        },
        car:function () {
          var p1 = new BMap.Point(this.self_lng,this.self_lat);
          var p2 = new BMap.Point(this.ad_lng,this.ad_lat);
          var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
          map.clearOverlays();
          driving.search(p1, p2);
        },
        walk:function () {
          var p1 = new BMap.Point(this.self_lng,this.self_lat);
          var p2 = new BMap.Point(this.ad_lng,this.ad_lat);
          var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
          map.clearOverlays();
          walking.search(p1, p2);
        }
      }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  .mapPage{
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
  }
  #allmap {width: 100%;height: 90%;overflow: hidden;margin:0;}
  .roadType{
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -120px;
    z-index: 100;
    div{
      width: 80px;
      height: 34px;
      font-size: 14px;
      text-align: center;
      line-height: 34px;
      color: #999999;
      background: #fff;
    }
  }
  .backBtn{
    width: 100%;
    padding: 0 10px;
    a{
      display: block;
      margin: 10px auto 0;
      width: 90%;
      height: 32px;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      background: #409EFF;
    }
  }
</style>