vue + 高德地图路径规划的demo

vue+ 高德地图路径规划的demo

官方文档说明

位置经纬度+ 驾车路线规划 高德地图官方参考链接

demo:

<template>
  <div id="demo">
    <el-amap vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo">
    </el-amap>
  </div>
</template>

<script>
  import {
    AMapManager
  } from 'vue-amap';
  import VueAMap from 'vue-amap'
  let amapManager = new VueAMap.AMapManager();
  export default {
    name: "demo",
    data() {
      return {
        amapManager,
        mapEvents: {
          init(o) {
            o.setMapStyle('amap://styles/macaron'); //自定义的高德地图的样式，我选的是马卡龙
            let marker = new AMap.Marker({ //点图标
              position: [116.379028, 39.865042]
            });
            o.setZoomAndCenter(16, [116.379028, 39.865042])
            marker.setMap(o);
            o.plugin(["AMap.Walking"], function() {
              var driving = new AMap.Walking({
                map: o
              })
              //位置经纬度+ 驾车路线规划
              //参考连接： https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat
              //官方文档说明： https://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving
              // driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
              //   if (status === 'complete') {
              //     console.log('绘制成功');
              //   } else {
              //     console.log('绘制失败', result);
              //   }
              // });
              //地点关键字+ 驾车路线规划
              driving.search([{
                  keyword: '北京市地震局(公交站)',
                  city: '北京'
                },
                {
                  keyword: '亦庄文化园(地铁站)',
                  city: '北京'
                }
              ], function(status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                  console.log('绘制驾车路线完成');
                } else {
                  console.log('获取驾车数据失败：' + result);
                }
              });
              o.addControl(driving);
            })
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .amap-demo {
    width: 100%;
    height: 100vh;
  }
</style>