前言

1.相关API

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

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

请求参数：

返回参数：

API错误码：

系统错误码：

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，支持定位，地址解析，位置标注，位置截图，路线规划，周边查询，兴趣点搜索和在线导航。