持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

前言

1.相关API

接口地址：api.jisuapi.com/transit/lin… 返回格式：JSON,JSONP 请求方法：GET POST 请求示例：

https://api.jisuapi.com/transit/line?cityid=382&transitno=86&appkey=yourappkey

请求参数：

参数名称	类型	必填	说明
city	string	否	城市 cityid city任选其一
cityid	int	否	城市ID
transitno	string	是	车次查询地铁加地铁2个字

返回参数：

参数名称	类型	说明
transitno	string	车次
startstation	string	始发站
endstation	string	终点站
starttime	string	最早发车时间
endtime	string	最晚发车时间
price	string	票价
maxprice	string	最高票价
sequenceno	string	顺序
station	string	站点
lat	string	纬度百度坐标系
lng	string	经度
buscompany	string	所属公交公司
timetable	string	排班表
subway	string	地铁换乘

API错误码：

代号	说明
201	公交车次为空
202	城市ID为空
203	起点为空
204	终点为空
205	城市为空
206	公交站点为空
207	地址为空
210	没有信息

系统错误码：

代号	说明
101	APPKEY为空或不存在
102	APPKEY已过期
103	APPKEY无请求此数据权限
104	请求超过次数限制
105	IP被禁止
106	IP请求超过限制
107	接口维护中
108	接口已停用

2.相关案例

请求API：api.jisuapi.com/transit/lin…

返回JSON：

{
    "status": 0,
    "msg": "ok",
    "result": [
        {
            "transitno": "86路",
            "startstation": "西溪竞舟苑",
            "endstation": "景芳小区",
            "starttime": "05:45",
            "endtime": "21:45",
            "price": "2",
            "maxprice": "2.00",
            "list": [
                {
                    "sequenceno": 1,
                    "station": "西溪竞舟苑",
                    "lat": "30.28806",
                    "lng": "120.06484"
                },                
                {
                    "sequenceno": 22,
                    "station": "和平广场",
                    "lat": "30.29524",
                    "lng": "120.18258"
                },
                {
                    "sequenceno": 25,
                    "station": "濮家新村",
                    "lat": "30.29059",
                    "lng": "120.20558"
                },                
                {
                    "sequenceno": 29,
                    "station": "景芳小区",
                    "lat": "30.27631",
                    "lng": "120.21277"
                }
            ]
        },
        {
            "transitno": "86路",
            "startstation": "景芳小区",
            "endstation": "西溪竞舟苑",
            "starttime": "05:45",
            "endtime": "21:45",
            "price": "2",
            "maxprice": "2.00",
            "list": [
                {
                    "sequenceno": 1,
                    "station": "景芳小区",
                    "lat": "30.27628",
                    "lng": "120.21274"
                },
                {
                    "sequenceno": 2,
                    "station": "濮家新村",
                    "lat": "30.28873",
                    "lng": "120.20592"
                },                
                {
                    "sequenceno": 25,
                    "station": "西溪竞舟苑",
                    "lat": "30.28807",
                    "lng": "120.06484"
                }
            ]
        }
    ]
}

一、站点搜索

1.wxml

<!--pages/search/search.wxml-->
<view class='all'>
  <view class='top'>
    <view class='topsearch'>
      <input type='text' placeholder='请搜索线路' bindinput="setLine" focus='true'></input>
    </view>
    <view class='searchbtn'>
      <image src="../../imgs/search-selected.png" bindtap='search'></image>
    </view>
  </view>
  <view class='mdle'>
    <view class='middle' wx:for="{{lines}}" wx:key="" wx:for-index="idx1" wx:for-item="line">
      <view bindtap='jumpLineDetail' data-line='{{line.transitno}}'>
        <view class='middletop'>{{line.transitno}}</view>
        <view class='middlebottom'>
          <view class='middlebottom1'>{{line.startstation}}</view>
          <view class='middlebottom2'>
            <image src="../../imgs/doublearrow.png"></image>
          </view>
          <view class='middlebottom1'>{{line.endstation}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

2.js

// pages/search/search.js
var app = getApp()
var config = require('../../libs/config.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    city: "",//当前城市
    line: "",//用户输入的线路
    lines: [] //搜索得到的线路集合
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
    _this.setData({
      city: options.city,
    })
  },

  getLine() {
    var _this = this
    app.showLoading("搜索数据中")
    wx.request({
      url: 'http://api.jisuapi.com/transit/line', 
      data: {
        appkey: config.Config.busappkey,
        city: _this.data.city,
        transitno	: _this.data.line
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res)
        var lines = res.data.result
        var temp = []
        var linesTemp = []
        if (lines.length > 0) {
          for (var i = 0; i < lines.length; i++) {
            if (temp.indexOf(lines[i].transitno) == -1) {
              lines[i].startstation = lines[i].list[0].station;
              lines[i].endstation = lines[i].list[lines[i].list.length - 1].station
              temp.push(lines[i].transitno)
              linesTemp.push(lines[i]);
            }
          }
        }
        _this.setData({
          lines: linesTemp
        })
        console.log("搜索数据", _this.data.lines)
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        app.hideLoading()
      }
    })
  },
  setLine(e) {
    var _this = this
    var value = e.detail.value
    _this.setData({
      line: value
    })
  },
  search(e) {
    this.getLine()
  },
  jumpLineDetail(e) {
    var _this = this
    var line = e.currentTarget.dataset.line
    var station = e.currentTarget.dataset.station || ''
    var city = _this.data.city
    wx.navigateTo({
      url: '../lineDetail/lineDetail?line=' + line + '&city=' + city + '&station=' + station
    })
  },
})

3.效果

在这里插入图片描述

总结

本篇获取周边站址的API是第三方API，第三方API其实在应用中很常见比如：车牌识别、图片搜索、短信接口、语音识别、语音合成、天气数据、地铁查询、实时物流、飞机查询等等。

【愚公系列】2022年06月 微信小程序-项目篇(公交查询)-05线路查询

前言