1. Python技术站首页
  2. 云计算

Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）

• 云计算

下面我将详细讲解如何使用Vue和高德地图搭建实时公交应用功能，包括地图、附近站点、线路详情、输入提示和换乘详情五个部分。

1. 准备工作

在开始搭建实时公交应用之前，我们需要先进行一些准备工作：
1. 在高德开放平台上注册开发者账号，并申请一个Web服务的API Key；
2. 在Vue项目中安装高德地图的SDK：npm install vue-amap --save。

2. 地图功能搭建

首先，我们需要在Vue项目中引入高德地图的SDK，然后在组件中配置高德地图，并进行初始化。以首页为例，代码如下：

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

<script>
import AMap from 'vue-amap';

export default {
  name: 'HomePage',
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale'
      ]
    });
  }
};
</script>

以上代码中，我们引入了vue-amap，并在mounted钩子函数中对地图进行初始化。其中，“your amap key”需要替换为你自己的高德地图API Key。

接下来，我们在“map-container”中放置地图实例。代码如下：

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

<script>
import AMap from 'vue-amap';

export default {
  name: 'HomePage',
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale'
      ]
    }).then(() => {
      const map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 13
      });
    });
  }
};
</script>

以上代码中，我们在地图初始化后，创建了一个Map实例，并将其放置在“map-container”中。其中，center表示地图的中心点坐标，zoom表示地图的缩放级别。

3. 附近站点功能搭建

接下来，我们需要在地图上显示附近的站点。为此，我们需要使用高德地图的PlaceSearch插件。代码如下：

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

<script>
import AMap from 'vue-amap';

export default {
  name: 'HomePage',
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.PlaceSearch'
      ]
    }).then(() => {
      const map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 13
      });
      const placeSearch = new AMap.PlaceSearch({
        map: map
      });
      placeSearch.searchNearBy('公交站', map.getCenter(), 1000, (status, result) => {
        if (result && result.poiList && result.poiList.pois) {
          // 处理附近的公交站点
        }
      });
    });
  }
};
</script>

以上代码中，我们将PlaceSearch插件引入，并在地图初始化后创建一个PlaceSearch实例。然后，使用searchNearBy方法搜索附近的“公交站”，并将结果显示在地图上。

4. 线路详情和输入提示功能搭建

接下来，我们需要实现线路详情和输入提示功能。为此，我们可以使用高德地图的LineSearch和Autocomplete插件。代码如下：

<template>
  <div class="container">
    <div id="map-container"></div>
    <div class="search-container">
      <input type="text" placeholder="请输入起点" v-model="startInput" @input="searchStart" />
      <input type="text" placeholder="请输入终点" v-model="endInput" @input="searchEnd" />
      <ul v-show="showList">
        <li v-for="(item,index) in inputTipsList" :key="index" @click="selectTip(item)">
          <i class="tipicon"></i>
          <span class="tipcontent">{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AMap from 'vue-amap';

export default {
  name: 'BusPage',
  data() {
    return {
      startInput: '',
      endInput: '',
      inputTipsList: [],
      showList: false
    };
  },
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.PlaceSearch',
        'AMap.LineSearch',
        'AMap.Autocomplete'
      ]
    }).then(() => {
      this.map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 13
      });
      this.lineSearch = new AMap.LineSearch({
        pageIndex: 1,
        pageSize: 10,
        extensions: 'all'
      });
      this.autocomplete = new AMap.Autocomplete();
      AMap.plugin(['AMap.PlaceSearch'], () => {
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        });
      });
    });
  },
  watch: {
    startInput(val) {
      if (!val) {
        this.showList = false;
        return;
      }
      this.autocomplete.search(val, (status, result) => {
        if (result.info === 'OK') {
          this.inputTipsList = result.tips;
          this.showList = true;
        }
      });
    },
    endInput(val) {
      if (!val) {
        this.showList = false;
        return;
      }
      this.autocomplete.search(val, (status, result) => {
        if (result.info === 'OK') {
          this.inputTipsList = result.tips;
          this.showList = true;
        }
      });
    }
  },
  methods: {
    selectTip(tip) {
      if (this.startInput !== '') {
        this.startInput = tip.name;
      } else if (this.endInput !== '') {
        this.endInput = tip.name;
      }
      this.showList = false;
    },
    searchStart() {
      if (this.startInput !== '') {
        this.showList = false;
        this.lineSearch.search(this.startInput, (status, result) => {
          if (status === 'complete' && result.info === 'OK' && result.lineInfo) {
            // 处理起点路线详情
          }
        });
      }
    },
    searchEnd() {
      if (this.endInput !== '') {
        this.showList = false;
        this.lineSearch.search(this.endInput, (status, result) => {
          if (status === 'complete' && result.info === 'OK' && result.lineInfo) {
            // 处理终点路线详情
          }
        });
      }
    }
  }
};
</script>

以上代码中，我们在组件中引入了LineSearch和Autocomplete插件，并分别在起点和终点输入框中使用Autocomplete实现自动提示输入。当用户输入起点或终点后，会触发searchStart或searchEnd方法进行搜索，并将搜索结果显示在页面上。

5. 换乘详情功能搭建

最后，我们需要实现换乘详情的功能。为此，我们可以使用高德地图的Transfer插件。代码如下：

<template>
  <div class="container">
    <div id="map-container"></div>
    <div class="search-container">
      <input type="text" placeholder="请输入起点" v-model="startInput" @input="searchStart" />
      <input type="text" placeholder="请输入终点" v-model="endInput" @input="searchEnd" />
      <ul v-show="showList">
        <li v-for="(item,index) in inputTipsList" :key="index" @click="selectTip(item)">
          <i class="tipicon"></i>
          <span class="tipcontent">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="transfer-container" v-show="transferList.length > 0">
      <h3>换乘详情</h3>
      <ul>
        <li v-for="(line,index) in transferList" :key="index">
          <div class="line-detail">
            <div class="line-name">{{ line.name }}</div>
            <div class="line-stops">
              <span v-for="(stop,ind) in line.via_stops.slice(1,-1)" :key="ind">{{ stop.name }}{{ ind !== line.via_stops.slice(1,-1).length - 1 ? ' → ' : '' }}</span>
            </div>
          </div>
          <div class="line-duration">{{ line.duration }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AMap from 'vue-amap';

export default {
  name: 'BusPage',
  data() {
    return {
      startInput: '',
      endInput: '',
      inputTipsList: [],
      showList: false,
      transferList: [],
      selectedList: []
    };
  },
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.PlaceSearch',
        'AMap.LineSearch',
        'AMap.Autocomplete',
        'AMap.Transfer'
      ]
    }).then(() => {
      this.map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 13
      });
      this.lineSearch = new AMap.LineSearch({
        pageIndex: 1,
        pageSize: 10,
        extensions: 'all'
      });
      this.autocomplete = new AMap.Autocomplete();
      this.transfer = new AMap.Transfer({
        city: '北京市',
        policy: AMap.TransferPolicy.LEAST_TIME
      });
      AMap.plugin(['AMap.PlaceSearch'], () => {
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        });
      });
    });
  },
  watch: {
    startInput(val) {
      if (!val) {
        this.showList = false;
        return;
      }
      this.autocomplete.search(val, (status, result) => {
        if (result.info === 'OK') {
          this.inputTipsList = result.tips;
          this.showList = true;
        }
      });
    },
    endInput(val) {
      if (!val) {
        this.showList = false;
        return;
      }
      this.autocomplete.search(val, (status, result) => {
        if (result.info === 'OK') {
          this.inputTipsList = result.tips;
          this.showList = true;
        }
      });
    }
  },
  methods: {
    selectTip(tip) {
      if (this.startInput !== '') {
        this.startInput = tip.name;
      } else if (this.endInput !== '') {
        this.endInput = tip.name;
      }
      this.showList = false;
    },
    searchStart() {
      if (this.startInput !== '' && this.endInput !== '') {
        this.transfer.search([
          { keyword: this.startInput, city: '北京' },
          { keyword: this.endInput, city: '北京' }
        ], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.transferList = result.plans;
          }
        });
      }
    },
    searchEnd() {
      if (this.startInput !== '' && this.endInput !== '') {
        this.transfer.search([
          { keyword: this.startInput, city: '北京' },
          { keyword: this.endInput, city: '北京' }
        ], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.transferList = result.plans;
          }
        });
      }
    }
  }
};
</script>

以上代码中，我们在组件中引入了Transfer插件，并在搜索起点和终点时，使用Transfer进行搜索。搜索结果会返回符合条件的所有路线方案，我们需要将所有方案的换乘详情显示在页面上。

6. 示例说明

示例1：在地图上显示当前位置并标注附近的公交站点和地铁站点。

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

<script>
import AMap from 'vue-amap';

export default {
  name: 'DemoPage',
  mounted() {
    AMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.Geolocation',
        'AMap.PlaceSearch'
      ]
    }).then(() => {
      const map = new AMap.Map('map-container', {
        zoom: 14
      });
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        buttonOffset: new AMap.Pixel(10, 20),
        zoomToAccuracy: true,
        buttonPosition: 'RB'
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          map.setCenter(result.position);
          const placeSearch = new AMap.PlaceSearch({
            map: map
          });
          placeSearch.searchNearBy(['地铁站', '公交站'], result.position, 1000, (status, result) => {
            if (result && result.poiList && result.poiList.pois) {
              // 处理附近的公交站点和地铁站点
            }
          });
        }
      });
    });
  }
};
</script>

以上代码中，我们在高德地图上显示当前位置，并标注附近的公交站点和地铁站点。

示例2：在地图上实现特定公交路线的导航，包括起点、终点、路线详情和换乘详情。

```html

  • 谈谈Linux运维人员是否需要掌握一门编程语言

    Linux运维人员是否需要掌握一门编程语言是一个长期存在争议的问题。笔者认为Linux运维人员可以通过学习一门编程语言来更好地完成日常工作，提高效率和能力。 为什么Linux运维人员需要学习一门编程语言？ 自动化运维的需求。对于大型企业，业务量大、服务器数量多，人工运维成本高，容易出错。掌握一门编程语言可以快速编写脚本程序，实现系统自动化运维，提升效率和稳定…

    云计算 2023年5月18日
    00

  • centos 版本阿里云上配置svn服务器，eclipse连接的时候提示：由于目标计算机积极拒绝，无法连接

    再说下面的时候，千万不要犯一些低级错误，比如说端口号写错了，命名是3690不要写成3960,。其实在这里我的主要原因是出在权限那块，设置的权限改为了none，详见上一篇博文。在这里也整理了一下网上的一些解决方案，如下： 出现上面的原因主要是： 1、svn没有启动成功 2、防火墙没有svn的端口号3690 解决方法： 1、启动svn服务 svnserve -d…

    云计算 2023年4月13日
    00

  • (7)Amazon云计算核心技术之非关系型数据库服务SimpleDB和DynamoDB – 古巴少女Eis

    非关系型数据库服务主要用于存储结构化的数据，并为这些数据提供查找，删除等基本的数据库功能。 AWS中提供的非关系型数据库主要包括SimpleDB和DynamoDB。 1.非关系型数据库与传统关系数据库的比较 总结: ACID:数据库事务正确执行的四个基本要素 A — 原子性Atomicity   事务中的所有操作，要么全部完成，要么全部不完成 C — 一…

    云计算 2023年4月12日
    00

  • 为网站添加CNZZ云推荐功能的简单方法讲解

    为网站添加CNZZ云推荐功能的方法如下： 1. 首先，注册并登录CNZZ统计 在注册完成后，登录到CNZZ统计网站，进入“管理中心”页面。在左侧导航栏中，选择“域名管理”，点击“设置”，找到“代码安装”选项卡。 2. 获取CNZZ云推荐功能代码 在一个单独的浏览器标签页中打开你的网站，并在CNZZ代码安装页面的相应位置填写网站的相关信息。之后，从页面上方的“…

    云计算 2023年5月17日
    00
    • 合作推广
    合作推广
    分享本页
    返回顶部