基于高德地图api,vue实现步行导航

vue代码

<template>
  <div>
    <van-nav-bar
      title="导航"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
       style="margin-top: .2rem;"
    />
    起始位置：
    <van-cell-group style="margin-top: .2rem;">
      <van-field id="start" v-model="startName" />
    </van-cell-group>
    结束位置：
    <van-cell-group style="margin-top: .2rem;">
      <van-field id="end" v-model="endName" placeholder="输入目的地" />
    </van-cell-group>

    <div id="container" />
    <div id="container1" />
    <van-button type="info" style="margin-top: .2rem;" @click="goView">去往这里</van-button>

<div class="chat">
  <Chat></Chat>

</div>
  


    <van-popup v-model="show" class="tanchuang">
      <h1 class="biaoti">是否允许获取当前定位</h1>
      <div>
        <div class="buttonjz">
          <van-button round type="info" @click="position">获取当前定位</van-button>
          <van-button disabled round  style=" margin-left: .3rem;" type="danger"> 不允许 </van-button>
          </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import Chat from './Chat.vue';
export default {
  data: () => {
    return {
      map: null,
      startName: "",
      endName: "",
      show: true,
    };
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: "agc19f2351109059453422cfdfb2b66d", // 申请key对应的秘钥
    };
    // DOM初始化完成进行地图初始化
    this.initMap();
    //   this.position()
  },
   components:{
    Chat
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/");
    },
    goView() {
      document.getElementById("container").style.zIndex = 9;
      document.getElementById("container").style.display = "block";
      document.getElementById("container1").style.display = "none";
      // eslint-disable-next-line no-undef
      const walking = new AMap.Walking({
        map: this.map,
        // 步行路线规划策略
        policy: "panel",
      });
      const points = [
        { keyword: this.startName, city: "全国" },
        { keyword: this.endName, city: "全国" },
      ];

      walking.search(points, (status, result) => {
        // 未出错时，result即是对应的路线规划方案
        console.log("status=", status);
        console.log("result=", result);
      });
    },
    position() {
      var that = this;
      that.show = !that.show;

      document.getElementById("container").style.display = "none";
      document.getElementById("container1").style.display = "block";
      //初始化地图对象，加载地图
      var map = new AMap.Map("container1", {
        resizeEnable: true,
      });
      var options = {
        // 设置定位超时时间，默认：无穷大
        timeout: 4000,
        // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        showButton: true, //是否显示定位按钮
        position: "LB", //定位按钮的位置
        /* LT LB RT RB */
        offset: [10, 20], //定位按钮距离对应角落的距离
        showMarker: true, //是否显示定位点
        markerOptions: {
          //自定义定位点样式，同Marker的Options
          offset: new AMap.Pixel(-18, -36),
          content:
            '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
        },
        showCircle: false, //是否显示定位精度圈
        circleOptions: {
          //定位精度圈的样式
          strokeColor: "#0093FF",
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: "#02B0FF",
          fillOpacity: 0.25,
        },
      };
      AMap.plugin(["AMap.Geolocation"], function () {
        var geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });
      });

      function onComplete(data) {
        var str = [];
        str.push("定位结果：" + data.position);
        str.push("定位类别：" + data.location_type);
        if (data.accuracy) {
          str.push("精度：" + data.accuracy + " 米");
        } //如为IP精确定位结果则没有精度信息
        str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
        // console.log(str)

        AMap.plugin("AMap.Geocoder", function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: "010",
          });

          var lnglat = [data.position];

          geocoder.getAddress(lnglat, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // result为对应的地理位置详细信息
              console.log(result.regeocodes[0].formattedAddress);
              that.startName = result.regeocodes[0].formattedAddress;
              // console.log(that.startName)
            }
          });
        });
      }
      //解析定位错误信息
      function onError(data) {
        console.log("定位失败");
        console.log(
          "失败原因排查信息:" +
            data.message +
            "</br>浏览器返回信息：" +
            data.originMessage
        );
      }
    },
    initMap() {
      AMapLoader.load({
        key: "cba319d68cfe18669d7f2e94b5f74ad4", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.ToolBar", "AMap.Walking", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
            // center: [105.602725, 37.076636] // 初始化地图中心点位置
          });
          const autoOptions = {
            // city 限定城市，默认全国
            city: "全国",
            input: "start",
          };
          // 实例化AutoComplete
          const autoComplete = new AMap.AutoComplete(autoOptions);
          const autoOptions2 = {
            // city 限定城市，默认全国
            city: "全国",
            input: "end",
          };
          // 实例化AutoComplete
          const autoComplete2 = new AMap.AutoComplete(autoOptions2);
          // 根据关键字进行搜索
          /* autoComplete.search(this.startName, (status, result) => {
            // 搜索成功时，result即是对应的匹配数据
            console.log(result)
          }) */
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  /* display: block; */
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 3rem;
}
#container1 {
  display: none;

  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 3rem;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-walking {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.biaoti {
  font-weight: 400;
  font-size: 25px;
  margin-top: 0.3rem;
  margin-left: 0.1rem;
  margin-bottom: 0.5rem;
}
.tanchuang {
  width: 4rem;
  height: 3rem;
  border-radius: 15px;
  /* background-color: aqua; */
}
.buttonjz{
   margin-left: .3rem;
}
.chat{
  margin-top: .2rem;
}
</style>

实现效果

 

进入界面是获取当前地址，输入目的地就规划出路线。