百度地图路线规划

驾车效果图:

 

 

公交效果图

骑行效果图

步行效果图

代码如下:

首先引入地图js 这里用的是3.0 AK需要去申请

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script>

<template>
  <!--地图-->
  <div style="width: 100%;height: 700px;">
    <!--始和结束地址-->
    <div id="r-result">
      请输入开始地点：
      <el-input id="startKeyword" v-model="startKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/>
      <br>
      请输入结束地点：
      <el-input id="endKeyword" v-model="endKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/>
      <br>
      请输入出行方式:
      <el-radio-group v-model="travelMode">
        <el-radio :label="1">驾车</el-radio>
        <el-radio :label="2">公交</el-radio>
        <el-radio :label="3">骑行</el-radio>
        <el-radio :label="4">步行</el-radio>
      </el-radio-group>
      <br>
      <el-button type="success" @click="search">检索</el-button>
    </div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <div></div>
    <div id="allmap" style="width:100%; height:450px;"></div>
    <div id="result" style="margin-top:600px;margin-left: 200px; width: 100%;height: 300px;text-align: left;overflow:auto;">根据起点和终点经纬度驾车导航路线</div>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: "index",
    data() {
      return {
        startKeyword: '',  //开始地址
        endKeyword: '',//结束地址
        travelMode: null,//出行方式
        localSearch:null,//自动搜索
        map:null,

        driving: null,  //驾车
        transit: null,  //公交
        walking: null,//步行
        riding:null,  //汽车
        startPoint: {
          lnt: null,
          lat: null
        },
        endPoint: {
          lnt: null,
          lat: null
        },
        time: null, //时间
        distance: null, //距离
      }
    },
    mounted() {
      this.init();
    },
    created() {

    },
    methods: {
      //驾车
      checkDriving(){
        var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);
        var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);
        this.driving.search(start, end);
        this.driving.search(end, start);
        let str = "从"+this.startKeyword+"到"+this.endKeyword+"需要"+this.time+", 距离"+this.distance
        $("#result").text(str);
      },
      //公交
      checkTransit(){
        var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);
        var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);
        this.transit.search(start, end);
      },
      //骑行
      checkRiding(){
        var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);
        var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);
        this.riding.search(start, end);
      },
      //步行
      checkWalking(){
        var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);
        var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);
        this.walking.search(start, end);
      },
      search(){
        this.map.clearOverlays();    //清除地图上所有覆盖物
        if (this.startKeyword!='' && this.END!='' && this.travelMode!=null){
          if (this.travelMode == 1){
            this.checkDriving();
          }else if (this.travelMode == 2){
            this.checkTransit();
          }else if(this.travelMode == 3){
            this.checkRiding();
          }else{
            this.checkWalking();
          }
        }else{
          this.$message.error("请输入起点,终点和交通方式")
        }

      },
      init() {
        var that = this;
        //初始化
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
        map.setMapStyleV2({styleId: 'bf6890d1f6963aa54a40f7c18e9227a1'});
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
        that.map = map;

        //开始地址
        var start = new BMap.Autocomplete(    //建立一个自动完成的对象
          {
            "input": "startKeyword"
            , "location": map
          });

        //鼠标放在下拉列表上的事件
        start.addEventListener("onhighlight", function (e) {
          var str = "";
          var _value = e.fromitem.value;
          var value = "";
          if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

          value = "";
          if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
          //G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        start.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          setPlace();
        });

        function setPlace(){
          map.clearOverlays();    //清除地图上所有覆盖物
          function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            //this.startPoint = pp
            that.startPoint.lng = pp.lng
            that.startPoint.lat = pp.lat
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
          }
          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          //this.startKeyword = myValue
          local.search(myValue);
        }

        //结束地址
        var end = new BMap.Autocomplete(    //建立一个自动完成的对象
          {
            "input": "endKeyword"
            , "location": map
          });

        //鼠标放在下拉列表上的事件
        end.addEventListener("onhighlight", function (e) {
          var str = "";
          var _value = e.fromitem.value;
          var value = "";
          if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

          value = "";
          if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
          //G("searchResultPanel").innerHTML = str;
        });

        var myValue2;
        end.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue2 = _value.province + _value.city + _value.district + _value.street + _value.business;
          setPlace2();
        });

        function setPlace2(){
          map.clearOverlays();    //清除地图上所有覆盖物
          function myFun2(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            //this.endPoint = pp
            that.endPoint.lng = pp.lng
            that.endPoint.lat = pp.lat
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
          }
          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun2
          });
          //this.endKeyword = myValue2
          local.search(myValue2);
        }


        //驾车
        var output = "从" + that.startKeyword + "到" + that.endKeyword + "驾车需要";
        var searchComplete = function (results) {
          if (that.driving.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
          }
          var plan = results.getPlan(0);
          output += plan.getDuration(true) + "\n";                //获取时间
          output += "总路程为：";
          output += plan.getDistance(true) + "\n";             //获取距离

          that.time = plan.getDuration(true);
          that.distance = plan.getDistance(true);
        }

        that.driving = new BMap.DrivingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true,
            panel: "result"
          },
          onSearchComplete: searchComplete,
          onPolylinesSet: function () {
            //console.log(output)
            //$("#result").text(output);
            //setTimeout(function(){alert(output)},"1000");
          }
        });

        //公交
        that.transit = new BMap.TransitRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true,
            panel: "result"

          },
          // 配置跨城公交的换成策略为优先出发早
          intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,
          // 配置跨城公交的交通方式策略为飞机优先
          // transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE
        });

        //步行
        that.walking = new BMap.WalkingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true,
            panel: "result"
          }
        });

        //骑行
        that.riding = new BMap.RidingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true,
            panel: "result"
          }
        });
      },
    },
  }
</script>

<style scoped>

  #result {
    position: fixed;
    top: 10px;
    left: 20px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    border-radius: 7px;
    z-index: 99;
  }
</style>

 

注意:

如果提示BMap未定义

在vue.config.js  ----  configureWebpack中添加

externals:{
   'BMap':'BMap'
},

地图初始化不能放在created 中 应放在mounted中

 

百度地图路径规划 驾车不提示行车路线 参考官方的API也无法实现

如有需要途经点 和 解决驾车不提示行车路线 请参考后面的高德路线规划