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

  • 云计算之路-阿里云 vs Azure：创建Windows虚拟机

    1. 提供的操作系统；2. 虚拟机创建界面；3. 远程连接创建好的虚拟机;4. 管理控制台界面。感言：国际巨头一旦全面进入国内市场，不会给国内厂商任何喘息的机会；1年后，不存在是否要坚守的问题，只存在选择谁的问题。 1. 提供的操作系统 阿里云提供的Windows操作系统有：Windows Server 2003, Windows Server 2008, …

    云计算 2023年4月11日
    00

  • ASP.NET Core开发教程之Logging利用NLog写日志文件

    下面是关于“ASP.NET Core开发教程之Logging利用NLog写日志文件”的完整攻略，包含两个示例说明。 简介 在ASP.NET Core应用程序中，我们可以使用Logging来记录应用程序的日志。NLog是一个流行的日志记录库，可以帮助我们将日志记录到文件、数据库等不同的目标中。在本攻略中，我们将介绍如何使用NLog来记录日志文件。 步骤 在AS…

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