Home Web Front-end JS Tutorial How to use Vue to make Amap and build a real-time bus application

How to use Vue to make Amap and build a real-time bus application

May 29, 2018 am 11:59 AM
map Gaode

This time I will show you how to use Vue to make Amap and build a real-time bus application. What are the precautions for using Vue to make Amap and build a real-time bus application? The following is a practical case. Let’s take a look.

The recent project is to use Amap to write a real-time bus application. Here is a small application to familiarize yourself with the use of Amap in vue, commonly used APIs, and common commands of vue

Let me show you the page effect first:

If you need the source code for children's shoes, please go to my github address vue to build real-time buses (stars welcome)

Implementation ideas

Import the specific functions of the Gaode map into the vue project and call the corresponding Gaode js API

1. Import Amap into the vue project

1. Modify the webpac.base.conf.js file

externals: {
 'AMap': 'AMap'
 }
Copy after login
2. Introduce sdk There are two ways to introduce it, one is on the index page Direct introduction

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
Copy after login
There is also asynchronous loading

<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script>
<script>
 function init(){
  var map = new AMap.Map('container', {
   center: [117.000923, 36.675807],
   zoom: 6
  });
  map.plugin(["AMap.ToolBar"], function() {
   map.addControl(new AMap.ToolBar());
  });
 }
</script>
Copy after login
Note that no matter which method is used, make sure that you want to load the js file of the map after the imported sdk. In this way, no error will be reported in the third step

3. Introduce

import AMap from 'AMap'
Copy after login
in the current vue page that needs to be loaded. Original link: http://www.jb51.net/article/ 112413.htm

2. Nearby site function

AMap.service(['AMap.PlaceSearch'], function () {
  var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
  pageSize: 4,
  typ: '',
  pageIndex: 1,
  city: '苏州' // 城市
  })
  // 中心点坐标
  // [currentLocation.lng,currentLocation.lat]
  // 120.6400961887,31.1411187922
  var currentLocation = true
  if (currentLocation !== undefined) {
  placeSearch.searchNearBy('公交站点', [120.6400961887, 31.1411187922], 1500, function (status, result) {
   if (status === 'complete' && result.info === 'OK') {
   var pois = result.poiList.pois
   var random = [4, 4, 24, 14]
   pois.forEach((item, index) => {
    this.items.push({
    site: item.name.substr(0, item.name.indexOf('(')),
    line: item.address,
    distance: item.distance,
    next_site: '',
    sitenum: random[index],
    siteId: item.id
    })
    this.lineInfo(item.address.substr(0, item.address.indexOf(';') - 1), item.id, index)
   })
   console.log(result.poiList)
   }
  }.bind(this))
  }
 }.bind(this))
Copy after login
Here mainly calls the Amap surrounding search API, constructs the location query class tye and sets it to empty, using the bus station as Keywords are used to query. The coordinates of the center point here are hard-coded. Friends can call the Amap positioning API to obtain the current coordinates

3. Real-time details of the line

AMap.service(['AMap.LineSearch'], function () {
  var linesearch = new AMap.LineSearch({
  pageIndex: 1,
  city: this.city,
  pageSize: 20,
  extensions: 'all' // 返回全部信息
  })
  linesearch.search(this.lineName, function (status, result) {
  // 取回公交路线查询结果
  if (status === 'complete' && result.info === 'OK') {
   this.lineInfo = result.lineInfo
   var tips = result.lineInfo[0]
   console.log(tips)
   this.from = tips.start_stop + '-'
   this.to = tips.end_stop
   this.lineId = tips.id
   if (tips.stime.length !== 0 && tips.length !== 0) {
   this.time_s = tips.stime.substr(0, 2) + ':' + tips.stime.substr(2, 2)
   this.time_e = tips.etime.substr(0, 2) + ':' + tips.etime.substr(2, 2)
   } else {
   this.time_s = '05:40'
   this.time_e = '18:40'
   }
   this.pay = tips.basic_price
   this.listWidth = tips.via_stops.length
   this.backImage.width = tips.via_stops.length + 'rem'
   tips.via_stops.forEach((item, index) => {
   if (item.id === this.siteId) {
    this.ind = index
    console.log(index)
    this.showActive(this.ind, this.siteName)
   }
   this.siteList.push({
    siteName: item.name,
    siteLat: item.location.lat,
    siteLng: item.location.lng
   })
   })
  } else {
   // 无数据或者查询失败
  }
  // setInterval(busposition(), 60000)
  }.bind(this))
 }.bind(this))
 },
Copy after login
Call the bus route query interface here to query the relevant route details. The location of the trolley here is a hard-coded array (actually, you can determine which two stations the shuttle bus is between based on the GPS coordinates of the shuttle bus). You can click on the corresponding site to display it. Number of nearest shuttle bus gathering points

4. Input prompt

this.autocomplete.search(this.keywords, function (status, result) {
  if (status === 'complete' && result.info === 'OK') {
   var tips = result.tips
   this.hisTips = []
   console.log('tips', tips)
   for (var i = 0; i < tips.length; i++) {
   if (tips[i].location !== '' && undefined !== tips[i].location && tips[i].district.substr(0, 6) === '江苏省苏州市') {
    this.hisTips.push({
    lng: tips[i].location.lng,
    lat: tips[i].location.lat,
    name: tips[i].name,
    district: tips[i].district
    })
   }
   }
  } else {
  }
  }.bind(this))
Copy after login
Here we use the command v-on:input to call our input prompt method for list display

5.Transfer details

AMap.service('AMap.Transfer', function () { // 回调函数
  // 实例化Transfer
  var transptions = {
  policy: 0, // 乘车策略,少时间0 少步行3 最少换乘2
  city: '苏州' // 城市
  }
  this.transfer = new AMap.Transfer(transptions)
  this.Linesearch()
 }.bind(this))
this.transfer.search([this.$route.query.fromAddressLng, this.$route.query.fromAddressLat], [this.$route.query.toAddressLng, this.$route.query.toAddressLat], function (status, result) {
  console.log(status)
  console.log(result)
  if (status === 'complete' && result.info === 'OK') {
   var plans = result.plans
   console.log('plans', plans)
   for (var i = 0; i < plans.length; i++) {
   var cost = plans[i].cost
   var time = parseInt(plans[i].time / 60)
   var segments = plans[i].segments
   var trans = []
   if (segments !== '' && segments !== undefined) {
    for (var j = 0; j < segments.length; j++) {
    if (segments[j].transit_mode === 'BUS') {
     const linename = segments[j].instruction
     trans.push(linename.substr(2, linename.indexOf('(') - 2))
    } else if (segments[j].transit_mode === 'SUBWAY') {
     const linename = segments[j].instruction
     trans.push(linename.substr(2, linename.indexOf('线') - 2))
    }
    }
   }
   this.plan.push({
    cost: cost,
    time: time,
    trans: trans
   })
   }
  } else {
  }
  }.bind(this))
Copy after login
Here we call

transfer.search()Pass in the starting point and end point coordinates, which are obtained by inputting prompts. Get The results are displayed in a list

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use AngularJS to implement tab switching

How to use Koa2 to develop WeChat 2D Scan the QR code to pay

The above is the detailed content of How to use Vue to make Amap and build a real-time bus application. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to make Google Maps the default map in iPhone How to make Google Maps the default map in iPhone Apr 17, 2024 pm 07:34 PM

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

How to use map and location functions in uniapp How to use map and location functions in uniapp Oct 16, 2023 am 08:01 AM

How to use map and positioning functions in uniapp 1. Background introduction With the popularity of mobile applications and the rapid development of positioning technology, map and positioning functions have become an indispensable part of modern mobile applications. uniapp is a cross-platform application development framework developed based on Vue.js, which can facilitate developers to share code on multiple platforms. This article will introduce how to use maps and positioning functions in uniapp and provide specific code examples. 2. Use the uniapp-amap component to implement the map function

How to add store address to Xiaohongshu map? How to fill in the store address setting? How to add store address to Xiaohongshu map? How to fill in the store address setting? Mar 29, 2024 am 09:41 AM

As Xiaohongshu becomes more and more popular among young people, more and more people choose to open stores on Xiaohongshu. Many novice sellers encounter difficulties when setting up their store address and do not know how to add the store address to the map. 1. How to add the store address to the map in Xiaohongshu? 1. First, make sure your store has a registered account on Xiaohongshu and has successfully opened a store. 2. Log in to your Xiaohongshu account, enter the store backend, and find the "Store Settings" option. 3. On the store settings page, find the "Store Address" column and click "Add Address". 4. In the address adding page that pops up, fill in the detailed address information of the store, including province, city, district, county, street, house number, etc. 5. After filling in, click the "Confirm Add" button. Xiaohongshu will provide you with the address

Master the art of using Apple Maps Guides on iPhone and iPad Master the art of using Apple Maps Guides on iPhone and iPad Aug 30, 2023 am 09:25 AM

In an ever-evolving technological world, the ability to navigate digital maps has become an essential skill. This article provides a comprehensive guide on how to use Apple Maps Guides on iPhone and iPad, a feature that revolutionizes the way users explore their surroundings and plan their journeys. Apple Maps is a built-in application on all Apple devices, and it is constantly updated and improved to provide a seamless navigation experience. One of its most notable features is the Guide feature, which provides a curated list of interesting places to visit in various cities around the world. This feature is not only beneficial for travelers, but also a boon for locals looking to discover new attractions in their city. How to use Apple Maps on iOS guide First, visit the Apple Maps

How to use at-a-glance directions on Google Maps How to use at-a-glance directions on Google Maps Jun 13, 2024 pm 09:40 PM

A year after its launch, Google Maps has launched a new feature. Once you set a route to your destination on the map, it summarizes your travel route. Once your journey begins, you can "Browse" route guidance from your phone's lock screen. You can use Google Maps to see your estimated arrival time and route. Throughout your trip, you can view navigation information on your lock screen, and by unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps.

Cloud-based and car-based MapNeXt is all done! Construction of next-generation online high-precision maps Cloud-based and car-based MapNeXt is all done! Construction of next-generation online high-precision maps Jan 31, 2024 pm 06:06 PM

Written above & the author’s personal understanding In collaborative, connected and automated mobility (CCAM), the stronger the ability of intelligent driving vehicles to perceive, model and analyze the surrounding environment, the more aware and able they are to understand and make decisions , as well as perform complex driving scenarios safely and efficiently. High-precision (HD) maps represent road environments with centimeter-level accuracy and lane-level semantic information, making them a core component of intelligent mobility systems and a key enabler of CCAM technology. These maps provide automated vehicles with a powerful advantage in understanding their surroundings. HD maps are also considered hidden or virtual sensors because they bring together knowledge from physical sensors (maps), namely lidar, cameras, GPS and IMU, to build a model of the road environment. HD map

How to create a map heat map using Highcharts How to create a map heat map using Highcharts Dec 17, 2023 pm 04:06 PM

How to use Highcharts to create a map heat map requires specific code examples. A heat map is a visual data display method that can represent the data distribution in each area through different color shades. In the field of data visualization, Highcharts is a very popular JavaScript library that provides rich chart types and interactive functions. This article will introduce how to use Highcharts to create a map heat map and provide specific code examples. First, we need to prepare some data

How to create an interactive map using HTML, CSS and jQuery How to create an interactive map using HTML, CSS and jQuery Oct 25, 2023 am 09:40 AM

How to Create an Interactive Map Using HTML, CSS, and jQuery Maps are a common visualization tool that help users understand and navigate geographic locations and related information more easily. By using HTML, CSS and jQuery, we can create an interactive map and add some fun and useful features. This article will guide you on how to use these techniques to create your own interactive map. Create the HTML structure First, we need to create the HTML structure to hold the map. The following is a basic

See all articles