집 > 기사 > 웹 프론트엔드 > Vue를 사용하여 Amap을 만들고 실시간 버스 애플리케이션을 구축하는 방법

Vue를 사용하여 Amap을 만들고 실시간 버스 애플리케이션을 구축하는 방법

php中世界最好的语言원래의: 2018-05-29 11:59:103910검색

이번에는 Vue를 사용하여 실시간 버스 애플리케이션을 구축하기 위해 Amap을 만드는 방법을 보여 드리겠습니다. Vue를 사용하여 실시간 버스 애플리케이션을 구축하기 위한 Notes는 무엇입니까? 살펴보자.

최근 프로젝트는 Amap을 사용하여 실시간 버스 애플리케이션을 작성하는 것입니다. 여기서는 vue에서 Amap 사용, 일반적으로 사용되는 API 및 vue의 일반적인 명령에 익숙해질 수 있도록 작은 애플리케이션을 공유하겠습니다. 효과:

소스 코드가 필요하면 내 github 주소 vue로 이동하여 실시간 버스를 구축하세요(별 환영합니다)

구현 아이디어에서 vue 프로젝트에서 Amap 맵의 특정 기능을 가져오고 그에 따라 Gaode js API를 호출합니다

1. vue 프로젝트에서 Gaode 맵을 가져옵니다

1. webpac.base.conf.js 파일을 수정합니다

externals: {
 'AMap': 'AMap'
 }

2. SDK 소개 소개하는 방법은 두 가지가 있는데 하나는 인덱스 페이지에 있습니다 직접 소개

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

비동기 로딩도 있습니다

<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>

어떤 방법을 사용하든 지도의 js 파일을 로드하고 싶은지 확인하세요. 가져온 SDK 이후. 이렇게 하면 세 번째 단계

3에서 오류가 보고되지 않습니다. 로드해야 하는 현재 vue 페이지에

import AMap from 'AMap'

를 소개하세요. 원본 링크: http://www.jb51.net/article/112413.htm

2. 여기서 인근 사이트 기능

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))

은 주로 Amap 주변 검색 API를 호출하고, 위치 쿼리 클래스 tye를 구성하고 이를 비워 두며, 버스 정류장을 키워드로 사용하여 센터의 좌표를 쿼리합니다. 여기 포인트는 하드 코딩되어 있으며 Amap 위치 확인 API를 사용하여 현재 좌표를 얻을 수 있습니다

3. 실시간 경로 세부 정보

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))
 },

여기에서 버스 경로 쿼리 인터페이스를 호출하여 관련 경로 세부 정보를 쿼리합니다. 여기의 차량 위치는 하드 코딩된 배열입니다(실제 상황은 셔틀 버스 GPS 좌표에 따라 셔틀 버스가 어느 두 정류장 사이에 있는지 결정함). 해당 사이트를 클릭하면 가장 가까운 셔틀 번호가 표시됩니다. 버스 수집 사이트

4. 입력 프롬프트

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))

여기서 v-on:input 명령을 사용하여 입력 프롬프트 메서드 List display

5를 호출합니다. 세부 정보 전송

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))

여기에서

를 호출하여 프롬프트를 입력하여 얻은 시작점과 끝점 좌표를 목록으로 표시하고 결과를 목록으로 표시합니다

transfer.search（）이 기사의 사례를 읽으신 후 방법을 마스터하신 것으로 믿습니다. 더 흥미로운 내용을 보려면 다른 관련 기사를 주목하십시오. PHP 중국어 웹사이트에서!