创新实训（十七）

在写路径规划界面的时候需要把酒店和所有景点之间的路径以轮图的形式画出来，单击相应的线可以跳转到对应的路线导航页面中去。

我一开始想直接用百度地图api提供的静态图方法，它可以把线段直接画在地图上，还可以规定图片大小，感觉效果很好。但我很快发现这样只能实现把路径画出来的功能，完全不能实现单击跳转功能。于是我只好寻找其他方法。

后来我发现可以利用百度地图在vue上的插件解决这个问题。使用npm安装好百度地图插件并引入之后，将地图组件放进需要的页面中，只要有点和线段两端的坐标，就可以在地图上画线了。

对于跳转到路线导航界面的功能，我直接使用了百度地图api提供的地图调起功能，直接将路径的两端坐标做参数写入网址中，为路径添加单击跳转事件即可。

<template>
  <div class="showPath">

    <navbar :activeIndex="3" :activeIndex2="3"></navbar>

    <div class="hotel">
        <span class="hotelname">{{hotelname+"到已选景点的路线："}}</span>
<!--        <span class="title">到已选景点的路线：</span>-->
    </div>

    <div class="haschosen">
      已选择景点：
      <el-tag
        v-for="sce in scenics"
        :key="sce"
        effect="plain"
        class="tags"
      >
        {{ sce }}
      </el-tag>
    </div>

    <el-divider class="devider"></el-divider>

    <div class="baidumap" v-loading="loading">
      <baidu-map
        class="map"
        :center="center"
        :zoom="15"
        :scroll-wheel-zoom="true"
      >
        <bm-scale anchor="BMAP_ANCHOR_CENTER"></bm-scale>
        <bm-marker
          :position="center"
          :dragging="true"
        >
          <bm-label
            :content="hotelname"
            :labelStyle="{ color: 'red', fontSize: '12px' }"
            :offset="{ width: -35, height: 30 }"
          />
        </bm-marker>
        <bm-marker
            v-for="pos in positions"
            :key="pos.index"
          :position="pos.lnglat"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <bm-label
            :content="pos.position"
            :labelStyle="{ color: 'green', fontSize: '12px' }"
            :offset="{ width: -35, height: 30 }"
          />
        </bm-marker>
        <bm-polyline
          v-for="onepath in paths"
          :key="onepath.index"
          :path="onepath"
          stroke-color="blue"
          :stroke-opacity="0.5"
          :stroke-weight="6"
          @click="toPath(onepath)"
        ></bm-polyline>
      </baidu-map>
    </div>


  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
export default {
    components: {
    'navbar': NavBar,
  },
  data() {
    return {
        city:"",
        hotelname:"",
        scenics:[],
      scenicandaddress:[],
        oneScenic:false,
        firstScenic:"",
      loading:false,
      paths: [
        [
          { lng: 121.6292529148, lat: 31.2035397816 },
          { lng: 121.6282529148, lat: 31.2045397816 },
        ],
        [
          { lng: 121.6292529148, lat: 31.2035397816 },
          { lng: 121.6302529148, lat: 31.2035397816 },
        ],
      ],
      center: { lng: 121.6292529148, lat: 31.2035397816 },
      positions:[
        {position:"1",lnglat:{lng: 121.6282529148, lat: 31.2045397816}},
        {position:"2",lnglat:{lng: 121.6302529148, lat: 31.2035397816}},
      ]
    };
  },
  methods: {
    toPath(path) {
      var point1 = path[0];
      var point2 = path[1];
      // http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=webapp.baidu.openAPIdemo
      var url =
        "http://api.map.baidu.com/direction?origin=" +
        point1.lat +
        "," +
        point1.lng +
        "&destination=" +
        point2.lat +
        "," +
        point2.lng +
        "&mode=transit&region=" +
        encodeURIComponent(this.city) +
        "&output=html&src=webapp.baidu.openAPIdemo";
      window.open(url);
    },

    getInfos() {
      this.loading=true;
      this.$axios({
        method: "get",
        url: "http://127.0.0.1:8000/api/pathplan",
        params: {
          city: this.city,
          hotelname: this.hotelname,
          scenic:this.scenicandaddress,
        },
      })
        .then((res) => {
          // console.log(res.data.results); //在console中看到数据
          var array = res.data;
          this.loading=false;
          if (array == undefined || array.length <= 0) {
            console.log("no");
          } else {
            this.paths=array.paths;
            this.center=array.center;
            // this.positions=array.position;
            this.positions = array.positions.map((item) => {
      return { position: item.position, lnglat: {lng:item.lng,lat:item.lat} };
    });
          }
        })
        .catch((res) => {
          alert("出错了！");
        });
      this.loading=false;
    },

    returnScenic() {
      this.$router.go(-1);
    },
    
  },

  mounted(){
    this.hotelname = this.$route.query.hotelname;
    this.city=this.$route.query.city;
    this.oneScenic=this.$route.query.oneScenic;
    this.firstScenic=this.$route.query.firstScenic;
    this.scenicandaddress=this.$route.query.scenicandaddress;
    console.log(this.oneScenic);
    if(this.oneScenic=="true"){
      this.scenics.push(this.firstScenic);
      console.log("一个景点");
      console.log(this.scenics);
      console.log(this.oneScenic);
    }else{
      this.scenics = this.$route.query.scenics;
      console.log("多个景点");
      console.log(this.scenics);
    }
    this.getInfos();
  }
};
</script>