文章目录
前言1.公交车站的意义2.公交车站的作用一、周边站点1.wxml2.js3.wxss4.实际效果前言
1.公交车站的意义
转变现有出行模式，倡导公共交通和混合动力汽车、电动车、自行车等低碳或无碳方式，同时也丰富出行生活，增加出行项目。扭转奢华浪费之风，强化清洁、方便、舒适的功能性，提升文化的品牌性。加强出行智能化发展，提高运行效率，同时及时全面引进节能减排技术，降低碳消耗，最终形成全产业链的循环经济模式。2.公交车站的作用
对老百姓来说，公共汽车出行，成本低廉。对国家来说，公共汽车可以减少私家车的出行，对大自然来说是环保的。公共汽车可以减少交通压力。公共汽车往往能涵盖这个城市的绝大多数地区，对偏远地区来说是很方便的。一、周边站点
小程序的周边站点是实时获取当前登录用户的位置信息，进而给出附件公交车站信息，以便用户选择乘车方案。
1.wxml
<!--pages/research/research.wxml--><view class="zhenggeyemian"><view class='ttop'><view class="topsearch"><view class="topsearchtitle"><view class="leftspan">{{locationInfo.city}}</view><image src="../../imgs/search.png"></image><view bindtap="jumpSearch" style='color:grey;font-size:13px;'>请输入搜索线路</view></view></view><view class="danghang"><view class="danghang2" data-type="1" style='{{type=="1"?"border-bottom: 2px solid red":""}}' bindtap='changeType'>周边站点</view><view class="danghang3" data-type="2" style='{{type=="2"?"border-bottom: 2px solid red":""}}' bindtap='changeType'>地图</view></view></view><view class='middles'><view class="middle" wx:if="{{type=='1'}}" wx:for="{{stationList}}" wx:key="" wx:for-index="idx1" wx:for-item="station"><view class='middlesingle'><view class='middlesingletop' bindtap='jumpLinesShow' data-station="{{station.station}}"><view class='middlesingletopleft'>{{station.station}}</view><view class='middlesingletopright'><view class='mi'>米</view><view class='middlesingletoprightredfont'>{{station.distance}}</view><view class='mi'> 距离你</view><view class="imagess"><image src="../../imgs/distance.png"></image></view></view></view><view class='middlesinglebottom' wx:for="{{station.lines}}" wx:key="" wx:for-index="idx2" wx:for-item="line" bindtap='jumpLineDetail' data-line='{{line}}' data-station="{{station.station}}"><view class='ditiemz'>{{line}}</view></view></view></view><view class="map" wx:if="{{type=='2'}}"><map id="map" longitude="{{locationInfo.longitude}}" latitude="{{locationInfo.latitude}}" scale="16" markers='{{markers}}' bindcallouttap='callouttap' show-location style="width: 100%;height:430px;"></map></view></view></view>
2.js
// 引入SDK核心类var QQMapWX = require('../../libs/qqmap/qqmap-wx.js');var qqmap;var config = require('../../libs/config.js');var app = getApp()// pages/research/research.jsPage({/*** 页面的初始数据*/data: {locationInfo: {},stationList: [],type: "1",markers: []},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this// 实例化API核心类qqmap = new QQMapWX({key: config.Config.qqmapkey})_this.getLocationInfo()},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {wx.showNavigationBarLoading() //在标题栏中显示加载this.getLocationInfo()},/*** 得到经纬度和城市*/getLocationInfo() {var _this = thisapp.showLoading("拉取路线列表")wx.getLocation({type: 'gcj02',success: function (res) {var locationInfo = _this.data.locationInfolocationInfo.latitude = res.latitudelocationInfo.longitude = res.longitude// 调用接口qqmap.reverseGeocoder({location: {latitude: locationInfo.latitude,longitude: locationInfo.longitude},success: function (res) {locationInfo.city = res.result.address_component.citylocationInfo.address = res.result.formatted_addresses.recommend_this.setData({locationInfo: locationInfo})_this.getStationList()},fail: function (res) {console.log(res);app.hideLoading(locationInfo)},complete: function (res) {// complete// console.log(_this.data.locationInfo)}})}})},/*** 得到周边站址*/getStationList() {var _this = this// 调用接口var locationInfo = _this.data.locationInfoconsole.log(locationInfo)wx.request({url: '/transit/nearby', //周围地址接口data: {appkey: config.Config.busappkey,city: locationInfo.city,address: locationInfo.address},header: {'content-type': 'application/json' // 默认值},success: function (res) {var stationList = res.data.resultconsole.log(stationList)console.log(stationList.length)for (var i = 0; i < stationList.length; i++) {if(stationList[i].lines !=undefined){var temp = []for (var j = 0; j < stationList[i].lines.length; j++) {var line = stationList[i].lines[j]var newLine = line.substring(0, line.indexOf('('))if (temp.indexOf(newLine) == -1) {temp.push(newLine)}}stationList[i].lines = temp}}_this.setData({stationList: stationList})//设置标记点_this.setMapMarkers()console.log(_this.data.stationList)},fail: function (res) {console.log(res);},complete: function (res) {app.hideLoading()// console.log(res);wx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新}})},jumpLinesShow(e) {var _this = thisconsole.log(e)var station = e.currentTarget.dataset.stationvar city = _this.data.locationInfo.citywx.navigateTo({url: '../linesShow/linesShow?station=' + station + '&city=' + city})},jumpLineDetail(e) {var _this = thisvar line = e.currentTarget.dataset.linevar station = e.currentTarget.dataset.stationvar city = _this.data.locationInfo.citywx.navigateTo({url: '../lineDetail/lineDetail?line=' + line + '&city=' + city + '&station=' + station})},jumpSearch(e) {var _this = thisvar city = _this.data.locationInfo.citywx.navigateTo({url: '../search/search?city=' + city})},changeType(e) {var _this = thisvar type = e.currentTarget.dataset.type_this.setData({type: type})},setMapMarkers() {var _this = thisvar stationList = _this.data.stationListfor (var i = 0; i < stationList.length; i++) {(function (i) {wx.request({url: 'http://api./geoconv/v1/', //仅为示例，并非真实的接口地址data: {ak: config.Config.bmapkey,coords: stationList[i].lng + ',' + stationList[i].lat,from: 5, //百度地图采用的经纬度坐标;to: 3 //国测局（gcj02）坐标;},header: {'content-type': 'application/json' // 默认值},success: function (res) {// console.log(res)var lnglat = res.data.result[0]var marker = {}marker.iconPath = '../../imgs/location.png'marker.id = imarker.latitude = lnglat.ymarker.longitude = lnglat.xmarker.width = 20marker.height = 20marker.callout = {content: stationList[i].station,color: 'red',bgColor: '#fcfcfc',padding: 3,fontSize: 18,borderRadius: 10,display: 'BYCLICK',textAlign: 'left'}var markers = _this.data.markersmarkers.push(marker)_this.setData({markers: markers})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}})})(i)}},callouttap(e) {console.log(e)var _this = thisvar id = e.markerIdvar stationList = _this.data.stationListvar station = stationList[id].statione.currentTarget.dataset.station = station_this.jumpLinesShow(e)}})
3.wxss
/* pages/research/research.wxss */.uszhenggeyemianerinfo {float: left;width: 100%;}.zhenggeyemian{float: left;width: 100%;height: 100px;}.topsearch {width: 100%;float: left;height: 40px;padding-top: 6px;background-color: white;}.topsearchtitle {width: 90%;float: left;height: 20px;line-height: 20px;padding: 8px 10px 5px 10px;background-color: #eee;border-radius: 30px;}.leftspan {float: left;width: 13%;height: 100%;background-color: #eee;border: 1px solid #eee;font-size: 12px;}.topsearchtitle image {float: left;width: 8%;height: 100%;background-color: #eee;border: 1px solid #eee;font-size: 12px;}.topsearchtitle input {float: left;width: 76%;height: 100%;background-color: #eee;border: 1px solid #eee;font-size: 12px;}.ttop{position: fixed;float: left;width: 100%;z-index:1；}.danghang {float: left;width: 100%;height: 40px;line-height: 40px;background-color: white;border-bottom: 1px solid #eee;font-size: 12px;}.danghang2 {float: left;width: 50%;height: 39px;line-height: 39px;background-color: white;text-align: center;font-size: 12px;}.danghang3 {float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;background-color: white;font-size: 12px;}.middles{float: left;width: 100%;margin-top:88px;}.middle {float: left;width: 100%;}.middlesingle {margin-top: 10px;float: left;width: 99%;border: 1px solid #eee;}.middlesingletop {float: left;width: 100%;height: 35px;line-height: 35px;background-color: #eff;font-size: 12px;}.middlesingletopleft {float: left;width: 45%;height: 35px;line-height: 35px;background-color: #eff;font-size: 12px;padding: 0px 5px 0px 5px;}.middlesingletopright {float: left;width: 45%;text-align: right;height: 35px;line-height: 35px;background-color: #eff;font-size: 12px;}.imagess image{height: 40%;width: 40%;}.imagess{float: right;height: 35px;width: 30%;line-height:35px;}.middlesingletoprightredfont{float: right;color: red;font-size: 14px;}.mi{float: right;}.middlesinglebottom {float: left;}.ditiemz {margin: 5px 5px 5px 5px;padding: 5px 5px 5px 5px;font-size: 12px;border: 1px solid #eee;}.map{position:fixed;float: left;width: 100%;height: 430px;z-index:1；}
