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

  • .net 通过 WebAPI 调用nsfwjs 进行视频鉴别功能

    下面我会给出“通过.NET WebAPI调用NSFWJS进行视频鉴别功能”的完整攻略。该攻略分为以下几个步骤： 搭建.NET WebAPI项目 首先，我们需要搭建一个.NET WebAPI项目作为我们后续开发的基础。可以使用Visual Studio IDE来完成此操作。 选择File -> New -> Project，在弹出的“新建项目”对话…

    云计算 2023年5月17日
    00

  • [文章摘录] 云计算:系统实例与研究现状 (软件学报, 2009)

    Time: 3 hours陈康(清华大学),郑纬民.云计算:系统实例与研究现状.软件学报,2009,20(5):1337-1348 新鲜出炉的软件学报关于云计算的综述.该文作者的单位是清华信息科学与技术国家实验室(筹).国家实验室可比国家重点实验室要NB多了, 从数量上来看, 目前已经建成的国家实验室才4个, 包括        北京正负电子对撞机国家实验室…

    云计算 2023年4月11日
    00

  • 三未信安张岳公：深耕云加密 让云计算更安全

    第八届中国云计算大会进行到今天已经是第二天了，不同于第一天，今日除了上午的主会干活满满，还增加了异彩纷呈的、各种主题的分论坛。但实际上，在现场观众看不到的地方，我们也在致力于为大家挖掘更深一层的内容，包括专家观点、厂商动态、用户理解和其他的云技术的前沿信息。 综合IT业界的大背景来看，时下最热门的话题之一就是安全了，今天在中国云计算大会现场举办的2016云计…

    云计算 2023年4月13日
    00

  • ASP.NET中Web API的简单实例

    下面是关于“ASP.NET中Web API的简单实例”的完整攻略，包含两个示例说明。 简介 在ASP.NET中，我们可以使用Web API来创建RESTful风格的API。Web API可以帮助我们更好地处理HTTP请求和响应，并提供了一种简单的方式来创建API。在本攻略中，我们将介绍如何使用ASP.NET Web API创建一个简单的API。 步骤 在AS…

    云计算 2023年5月16日
    00

  • 亚马逊属于什么类型的电商平台

    亚马逊属于什么类型的电商平台 亚马逊是全球最大的电商平台之一，提供了广泛的商品和服务，包括图书、电子产品、家居用品、服装、食品等。根据其商业模式和经营策略，我们可以将亚马逊归类为以下几种类型的电商平台。 B2C电商平台 B2C电商平台是指面向消费者的电商平台，即企业直接向消费者销售商品和服务。亚马逊作为B2C电商平台，提供了广泛的商品和服务，消费者可以在亚马…

    云计算 2023年5月16日
    00

  • 使用python对泰坦尼克号幸存者进行数据分析与预测

    使用Python对泰坦尼克号幸存者进行数据分析与预测 1. 确认问题与目标 在进行数据分析之前，我们需要明确问题与目标： 问题：预测泰坦尼克号上乘客的生存率 目标：使用泰坦尼克号乘客数据集，建立一个机器学习模型，预测乘客的生存率 2. 获取数据 在进行数据分析之前，我们需要获取相应的数据。我们可以使用Pandas库对泰坦尼克号乘客数据集进行读取，该数据集可以…

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