由于vue-amap不支持路线规划，因此不予采纳。
效果如图
在这里插入图片描述

  1. 在index.html的header中引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script>
  <!--引入UI组件库（1.0版本） -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  1. 配置webpack
    在build\webpack.base.conf.js 中，找到module.exports， 添加如下代码，记得重启项目！！！！
externals: {
    AMap: 'AMap',
    AMapUI: 'AMapUI'
},

在这里插入图片描述

  1. 绘制地图并规划路线（关键代码）

用来放地图

<div class="page" id="map-container"></div>

用来放路线规划

<div id="panel"></div>

初始化

this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
});

公交路线查询

new AMap.Transfer({
        map: this.map,
        panel: "panel",
      }).search(
        [
          { keyword: "宁波大学", city: "宁波" },
          { keyword: "宁波老外滩", city: "宁波" },
        ],
        function (status, data) {
          console.log(data);
        }
      );
  1. 完整代码（精简版）
<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="panel"></div>
  </div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {
  name: "Amap",

  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // 地图初始化
    this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
    });
    // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
    // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
    // 公交站点查询
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.Transfer",
        "AMap.Geolocation",
        "AMap.StationSearch",
      ],
      () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.Transfer());
        this.map.addControl(new AMap.Geolocation());
        this.map.addControl(new AMap.StationSearch());
      }
    );
    this.getRoute(); // 获取线路规划
  },
  methods: {
    // 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）
    // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    getRoute() {
      new AMap.Transfer({
        map: this.map,
        panel: "panel",
      }).search(
        [
          { keyword: "宁波大学", city: "宁波" },
          { keyword: "宁波老外滩", city: "宁波" },
        ],
        function (status, data) {
          console.log(data);
        }
      );
    },
  },
};
</script>
<style  scoped>
.page {
  height: calc(100vh - 50px);
}
.map-content {
  position: relative;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
  1. 完整代码（定位、公交站点搜索、路线规划）

<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="routeInfo"></div>
  </div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {
  name: "Amap",
  components: { AMap, AMapUI },
  data() {
    return {
      map: null,
      transOptions: {},
      routeListData: [],
      stationListData: [],
    };
  },
  props: {
    sartAndEnd: Array, // 线路导乘起终点经纬度
  },
  mounted() {
    // 地图初始化
    this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
    });
    // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
    // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
    // 公交站点查询
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.Transfer",
        "AMap.Geolocation",
        "AMap.StationSearch",
      ],
      () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.Transfer());
        this.map.addControl(new AMap.Geolocation());
        this.map.addControl(new AMap.StationSearch());
      }
    );
    this.getRoute(); // 获取线路规划
    this.getLocation(); // 获取我的位置
    this.getBusStation(); // 站点查询
  },
  methods: {
    // 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）
    // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    getRoute(params) {
      params = 1;
      if (params === 1) {
        // map：AMap.Map对象, 展现结果的地图实例 panel：结果列表的HTML容器id或容器元素 nightflag：是否计算夜班车 policy：公交换乘策略
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.NO_SUBWAY,
        };
      } else if (params === 2) {
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.NO_SUBWAY,
        };
      } else if (params === 3) {
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.LEAST_TIME,
        };
      }
      // 构造公交换乘类
      var transfer = new AMap.Transfer(this.transOptions);
      // 一：
      // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
      // transfer.search(new AMap.LngLat(108.9342500000, 34.2305300000), new AMap.LngLat(108.9470386505, 34.2593889736), function (status, result) {
      //   // result即是对应的公交路线数据信息
      //   if (status === 'complete') {
      //     // 出行计划按照时间顺序排序
      //     const route = result.plans.sort(function (a, b) { return a.time - b.time })
      //     this.routeListData = route
      //     console.log(this.routeListData)
      //     // console.log(this.routeListData)
      //   } else {
      //     console.log('公交路线数据查询失败' + result)
      //   }
      // })

      // 二：
      // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
      transfer.search(
        new AMap.LngLat(108.93425, 34.23053),
        new AMap.LngLat(108.9470386505, 34.2593889736)
      );
      AMap.event.addListener(transfer, "complete", (res) => {
        // res即是对应的公交路线数据信息
        // res为获取到的当前位置的信息
        console.log(res);
        // 出行计划按照时间顺序排序
        const route = res.plans.sort(function (a, b) {
          return a.time - b.time;
        });
        this.routeListData = route;
        console.log(this.routeListData);
      }); // 返回出行方式信息
      AMap.event.addListener(transfer, "error", (err) => {
        console.log(err);
      }); // 返回出行方式信息出错信息
    },
    // 获取当前位置
    getLocation() {
      // 定义定位获取当前位置
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 100000, // 超过100秒后停止定位，默认：无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，默认：0
        convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: false, // 显示定位按钮，默认：true
        // buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：true
        showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      // 一定要add添加
      // this.map.addControl(geolocation)
      geolocation.getCurrentPosition(); // 获取用户当前的精确位置信息当回调函数中的status为complete的时候表示定位成功
      AMap.event.addListener(geolocation, "complete", (res) => {
        // res为获取到的当前位置的信息
        console.log(res);
      }); // 返回定位信息
      AMap.event.addListener(geolocation, "error", (err) => {
        console.log(err);
      }); // 返回定位出错信息
    },
    // 获取站点信息列表,使用父组件传入输入框的值
    getBusStation() {
      this.stationSearch = {
        pageIndex: 1, // 页码
        pageSize: 30, // 单页显示结果条数
        city: "029", // 确定搜索城市
      };
      var stationList = new AMap.StationSearch(this.stationSearch);
      // 一：
      // stationList.search('小', function (status, result) {
      //   // result即是对应的公交站点数据信息
      //   if (status === 'complete' && result.info === 'OK') {
      //     console.log(result)
      //     console.log(this.stationListData)
      //   } else {
      //     console.log('公交路线数据查询失败' + result)
      //   }
      // })
      // 二：
      stationList.search("西安钟楼"); // mock一个假数据
      AMap.event.addListener(stationList, "complete", (res) => {
        // res为获取到的当前位置的信息
        this.stationListData = res;
        console.log(this.stationListData);
      }); // 返回定位信息
      AMap.event.addListener(stationList, "error", (err) => {
        console.log(err);
      }); // 返回定位出错信息
    },
  },
};
</script>
<style  scoped>
.page {
  height: calc(100vh - 50px);
}
.map-content {
  position: relative;
}
#routeInfo {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue