#yyds干货盘点#愚公系列2022年12月 微信小程序-项目篇(公交查询)-06站点查询

Posted 2022-12-06

前言

1.相关API

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

https://api.jisuapi.com/transit/station?cityid=113&station=西溪竞舟苑&appkey=yourappkey

请求参数：

参数名称	类型	必填	说明
city	string	否	城市 cityid city任选其一
cityid	int	否	城市ID
station	string	是	站点名称

返回参数：

参数名称	类型	说明
transitno	string	线路名称
startstation	string	起点站
endstation	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： https://api.jisuapi.com/transit/station?cityid=113&station=西溪竞舟苑&appkey=你的密钥

返回JSON：

    "status": 0,
    "msg": "ok",
    "result": [
        
            "transitno": "86路",
            "startstation": "景芳小区",
            "endstation": "西溪竞舟苑"
        ,
        
            "transitno": "118路",
            "startstation": "西溪蒹葭苑",
            "endstation": "小车桥"
        ,
        
            "transitno": "860路",
            "startstation": "西溪竞舟苑",
            "endstation": "池华街公交站"
        ,        
        
            "transitno": "264路高峰线",
            "startstation": "西溪竞舟苑",
            "endstation": "焦家村公交中心站"
        
    ]

一、站点搜索

1.wxml

<!--pages/linesShow/linesShow.wxml-->
<view class=all>
  <view class="lispan" wx:for="lines" wx:key="" wx:for-index="idx1" wx:for-item="line">
    <view bindtap=jumpLineDetail data-line=line.transitno>
      <view class=q1>
        <view class=q11>
          <image src=../../imgs/bus.png />
        </view>
        <view class=q12>line.transitno?line.transitno:未知</view>
      </view>
      <view class=q2>
        <view class=q21>
          <view class=q211>line.startstation?line.startstation:未知</view>
          <view class=q212>
            <image src="../../imgs/doublearrow.png" />
          </view>
          <view class=q213>line.endstation?line.endstation:未知</view>
        </view>
        <view class=q22>
          <view class=q221>
            <view class=q2211>起:line.starttime?line.starttime:未知</view>
            <view class=q2212>终:line.endtime?line.endtime:未知</view>
          </view>
          <view class=q222>
            <view class=q2221>line.price?line.price:未知</view>
            <view class=q2222>¥</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

2.js

// pages/linesShow/linesShow.js
var config = require(../../libs/config.js);
var app = getApp()
Page(

  /**
   * 页面的初始数据
   */
  data: 
    city: "",
    station: "",
    lines: []
  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    console.log(options)
    var _this = this
    _this.setData(
      city: options.city,
      station: options.station
    )
    wx.setNavigationBarTitle(
      title: _this.data.station
    )
    _this.getStationList()
  ,

  
  getStationList() 
    var _this = this
    app.showLoading("拉取路线列表")
    // 调用接口
    wx.request(
      url: http://api.jisuapi.com/transit/station, //仅为示例，并非真实的接口地址
      data: 
        appkey: config.Config.busappkey,
        city: _this.data.city,
        station: _this.data.station
      ,
      header: 
        content-type: application/json // 默认值
      ,
      success: function (res) 
        console.log("拉取线路中", res);
        var lines = res.data.result
        var transitnos = []
        var linestemp = []
        for (var i = 0; i < lines.length; i++) 
          if (transitnos.indexOf(lines[i].transitno) == -1) 
            transitnos.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()
        // console.log(res);
      
    )
  ,
  jumpLineDetail(e) 
    var _this = this
    var line = e.currentTarget.dataset.line
    var city = _this.data.city
    var station = _this.data.station
    wx.navigateTo(
      url: ../lineDetail/lineDetail?line= + line + &city= + city + &station= + station
    )
  
)

3.效果

总结

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

相关地图API接口：

• 百度地图- 百度地图提供了android, ios版本的SDK和javascript API，可进行定位、地图、数据、出行、鹰眼轨迹和分析服务。
• 高德地图- 高德地图提供了JavaScript和web服务API，Android和iOS SDK，支持地图，定位，搜索，路线规划，导航和室内地图等。
• 腾讯地图- 腾讯地图提供了JavaScript API，Android和iOS SDK，支持定位，地图，地点搜索，路线和导航等。
• 天地图- 天地图提供了H5 API和JavaScript API等web API，同时提供了Android和iOS SDK，支持基础地图服务，图层管理，地图覆盖物，地图工具，地名搜索和出行规划服务。
• 图吧地图- 图吧提供了JavaScript和Flash API，Android和iOS SDK，支持定位，地址解析，位置标注，位置截图，路线规划，周边查询，兴趣点搜索和在线导航。