VUE中使用高德地图.做个轨迹添加器,为路线规划做数据

准备工作

使用前准备 : 高德地图key

使用插件: vue-amap

1.npm安装vue-amap

npm install vue-amap --save

2 在mai.js中引入

import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: "自己申请的key",
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',  //这里是vue-amp 的版本号
//这里是高德ui组件的版本号3
  uiVersion: '1.0'  //添加 uiVersion 的脚本版本号  这个很重要!必须要引入

});

3.在自己创建的组件页面使用(这里使用的是，地图 JS API v1.4.15 ；)
贴个地址:https://lbs.amap.com/api/javascript-api/summary
不多说上代码:

<template>
  <section>
    <el-row class="main-hd">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/system/trajectory' }">轨迹器</el-breadcrumb-item>
        <el-breadcrumb-item>添加轨迹</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="main-bd">
      <el-row style="height:40px">
        <span class="mainColor">起点：</span> <span style="margin-right:20px">{{data.start_point}}</span>
        <span class="mainColor">终点：</span> <span style="margin-right:20px">{{data.end_point}}</span>
        <span class="mainColor">距离：</span> <span style="margin-right:20px">{{data.distance}}公里</span>
        <span class="mainColor">行驶速度：</span>
        <span style="margin-right:20px">
            <el-input placeholder="请输入行驶速度" v-model="pointData.speed" clearable style="width:10%"></el-input>
        </span>
        <!-- <span class="mainColor">定位次数：</span> 
          <span style="margin-right:20px">
            <el-select v-model="pointData.position_count" style="width:6%">
              <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </span> -->
      </el-row>
      <el-row>
        <el-col :span="18">
          <div id="map-location"></div>
        </el-col>
        <el-col :span="6" style="padding-left:10px">
          <el-row style="margin-bottom:10px">已添加的线路点:</el-row>
          <el-row>
            <el-table class="nth" border :data="addData.points" style="height:470px;overflow:auto">
              <el-table-column label="序号" type="index" min-width="20" />
              <el-table-column label="地址" prop="address" />
              <el-table-column label="操作" min-width="30">
                <template slot-scope="scope">
                  <!-- <el-button type="text" size="small" @click="edit(scope.$index)">编辑</el-button> -->
                  <el-button type="text" size="small" @click="del(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row class="btn-group lg">
            <el-button type="primary" style="width:100px" @click="submit" :disabled='disabled'>保 存</el-button>
            <el-button type="info" style="width:100px" @click="$router.go(-1)">返 回</el-button>
          </el-row>
        </el-col>
      
      </el-row>
      <!-- 地图点位信息 -->
      <div class="info info-wrapper"  v-if="isMap">
          <!-- <div class="pd5">
            <span>序号:</span>
            <span>{{this.i}}</span>
          </div> -->
          <div class="pd5">
            <span style="width: 50px;">地址:</span>
            <span>{{this.infoWindow.contents}}</span>
          </div>
          <div class="pd5">
            <span style="width: 20%;">经度:</span>
            <input type="text" disabled  style=" width:80%;border: none; background:#fff"  v-model="search.lng" @change="chengeAddress">
          </div>
          <div class="pd5">
            <span style="width: 20%">纬度:</span>
            <input  type="text"  disabled  style="width:80%;border: none; background:#fff"  v-model='search.lat'   @change="chengeAddress" ></input>
          </div>
          <div class="pd5">
            <span>驾车距离：</span>
            <span>{{this.distance}}</span>
          </div>
            <div class="pd5">
            <span>驾车时间：</span>
            <span>{{this.driving_time}}</span>
          </div>
          <div class="pd5">
            <el-button type="primary" style="margin-left:40%" @click="save" :disabled="this.infoWindow.contents == ''">保存</el-button>
          </div>
      </div>
    </el-row>
  </section>
</template>

<script>
import { isSuccess,setStorage,getStorage } from "@/assets/js/utils"
import emap from "@/components/map/emap-line.vue"
export default {
  inject: ['reload'],
    components:{
      emap
  },
  data () {
    return {
      center: {},
      i: 0,
      index: '',
      startPath: '',
      endPath: '',
      wayPath: [],
      point: {
        lat: '',
        lng: ''
      },
      zoom: 15,
      data: {},
      search: {
        lng: '',
        lat: '',
        create_time: ''
      },
      addData: {
        pid: '',
        points: []
      },
      infoWindow: {
        show: true,
        contents: ''
      },
      options:[1,2,3,4,5,6],
      pointData:{
        points:[],
        // position_count:'',
        speed:''
      },
      distance:'',
      driving_time:'',
      disabled:false,
      end:[],
      start:[],
      maps:"",
      markerNum:0,
      marker1:"",
      isMap:false
    }
  },
  mounted () {
    this.query = this.$route.query;
    this.loadList(this.query.pid, this.query.type);
    this.pointData.pid = this.query.pid
  },
  watch: {
    // this.$refs.emp.waypoints:function(){

    // }
  },
  methods: {
    //初始化地图
    init(){
      let map = new AMap.Map('map-location', {//'map-location'是对应页面盒子的id
        resizeEnable: true, //自适应大小
        zoom: 15//初始视窗
      });
      this.maps =map 
      //调用驾车规划功能
      AMap.plugin('AMap.Driving',()=> {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          map:this.map  //绑定地图组件
        })
        //构造路线导航类
        var driving = new AMap.Driving({
            map: map,
            // panel: "map-location"
        });
        //创建搜索的路线  传入要规划的坐标点
        driving.search(new AMap.LngLat(this.start[0],this.start[1]), new AMap.LngLat(this.end[0],this.end[1]),{
          // waypoints:this.waypoints
          }, function(status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
                // log.success('绘制驾车路线完成')
            } else {
                // log.error('获取驾车数据失败：' + result)
            }
        });
      })
      this.getPoint(map)
      this.marker()
    },
    getMap(map) {
        map.on("click", showInfoClick);
    },
    // 获取坐标点中文信息方法
    Geocoder(lng,lat){
      let _this =   this
      // 地理编码与逆地理编码服务，提供地址与坐标间的相互转换 
      //可以获取选址的坐标点及文字信息
      AMap.plugin('AMap.Geocoder', function() {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: '010'
          })
          var lnglat = [lng, lat]   //将传入的坐标点整合成Arr
          geocoder.getAddress(lnglat, (status, result)=> {
            if (status === 'complete' && result.info === 'OK') {
                // result为对应的地理位置详细信息
                console.log(result)
                // _this.waypoints.push({coord:lnglat,address:result.formattedAddress})
                _this.infoWindow.contents=result.formattedAddress   //将获取的坐标点记录下来
            }
          })
        })
    },
    loadList (pid, type) {
      api('trajectory.edit.trajectory', { pid: pid }).then(res => {
        let data = isSuccess(res)
        console.log(res)
        this.data = data
        this.addData.pid = data.pid
        let a = this.data.interval_time
        // this.data.interval_time = a.toFixed(2)
        this.startPath = data.start_point
        this.endPath = data.end_point
        this.wayPath = data.points
        this.start=[data.start_point_lng,data.start_point_lat]
        this.end=[data.end_point_lng,data.end_point_lat]
      
        data.points.forEach(item =>{
          // item.address = `${item.province}${item.city}${item.street}`
          this.addData.points.push(item)
        })
        this.addData.points.forEach(item =>{
          item.address = `${item.province}${item.city}${item.street}`
        })
          
  
        this.pointData.speed = data.speed
        this.init()
      })
    },
    //创建坐标点方法
    marker(lng,lat){
        if(!lng){

          this.addData.points.forEach((item,index)=>{
            //点击保存后让地图重新更新,
              let markers = new AMap.Marker({
              position: [item.lng, item.lat],
              icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
              title:'序号: '+(index+1  ) +'   '+item.province+item.city+item.district+item.street
            });
            //将坐标点添加到地图中
            this.maps.add(markers)
          })
        }else{
          //这里是如果已经有坐标点,那么直接显示以保存的坐标点
          this.maps.remove(this.marker1)
           // 点标记显示内容，HTML要素字符串
            this.marker1 = new AMap.Marker({
              position: [lng,lat],
              icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
              });
      
          this.maps.add(this.marker1)
          
        }
        
    },
    getPoint (map) {
      let  _this = this
      //地图点击事件
      map.on("click",  (e) => {
        this.distance = ''
        this.driving_time = ''
     
      this.infoWindow.contents = ''
      this.isMap = true  //点击后的数据展示,如果没有点击就显示

 		//将数据存储
      this.search.lng =  e.lnglat.getLng() 
      this.search.lat = e.lnglat.getLat()
      this.point.lng = e.lnglat.getLng()
      this.point.lat = e.lnglat.getLat()
      this.infoWindow.show = true
      
	let lng = e.lnglat.getLng(); //获取经度
	let lat = e.lnglat.getLat(); //获取纬度
	this.markerNum ++
	this.marker(lng,lat)  //调用创建左边点方法
    
        _this.Geocoder(lng,lat)  //调用获取坐标点中文信息方法

      this.pointData.points = []
      // if(this.infoWindow.contents){
        this.pointData.points.push({
          i: this.i,
          lat: this.search.lat,
          lng: this.search.lng,
          address: this.infoWindow.contents
        })       
      // }
        api('trajectory.point.time', this.pointData).then(res => {
          let data = isSuccess(res)
          this.distance = data.points[0].distance
          this.driving_time = data.driving_time
          this.infoWindow.contents = data.end_address
        })
      })
    },

    //编辑
    edit (index) {
      this.i = index + 1
      this.infoWindow.show = true
      this.search.lng = this.addData.points[index].lng
      this.search.lat = this.addData.points[index].lat
      this.search.create_time = this.addData.points[index].create_time
      this.point.lng = this.addData.points[index].lng
      this.point.lat = this.addData.points[index].lat
      this.infoWindow.contents = this.addData.points[index].address
      this.distance = this.addData.points[index].distance
      this.driving_time = this.addData.points[index].driving_time
      console.log(this.addData.points[index])
    },
    //删除
    del (index) {
      if (confirm('确认删除？')) {
        this.addData.points.splice(index,1)
        this.wayPath.splice(index,1)
        // this.marker()
        this.init()
      }
    },
    //改变经纬度  地址也变
    chengeAddress () {
      api('waybill.trajectory.address.query', this.search).then(res => {
        let data = isSuccess(res)
        this.infoWindow.contents = res.msg
      })
    },
    //保存坐标点的方法
    save () {
      this.isMap =false

      if(this.infoWindow.contents){
          this.i++
          let marker = new AMap.Marker({
              position: [ this.search.lng,this.search.lat],
              icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
              });
      
          this.maps.add(marker)
        this.addData.points.push({
          i: this.i,
          lat: this.search.lat,
          lng: this.search.lng,
          address: this.infoWindow.contents,
          distance:this.distance,
          driving_time:this.driving_time
        })       
        this.wayPath.push(this.infoWindow.contents)
        this.infoWindow.show = false
        console.log(this.addData.points)
      }
    },
    submit () {
      this.addData.speed = this.pointData.speed
      
      this.disabled = true
      api('trajectory.trajectory.point.add', this.addData).then(res => {
        let data
        alert(res.msg)
        if(data = isSuccess(res) ) {
          this.$router.go(-1)
        }else{
          this.disabled = false
        }

      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/sass/mixin";
.bm-view {
  width: 100%;
  height: 500px;
}
#map-location{
  width: 100%;
  height: 700px;
}
.info{
  position: absolute;
  top: 65px;
  left: 45px;
  z-index: 999999999;
  width: 200px;
  // height: 270px;
  background: #fff;
  padding: 15px  10px;
  box-sizing: border-box;
  border-radius: 20px;
  font-size: 15px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.pd5{
padding-bottom: 5px ;
display: flex;
flex-wrap: nowrap;
align-content: center;
}
</style>
<style  >
.amap-icon img{
  width: 25px;
  height: 34px;
}
</style>

效果图