Browse Source

导航起点位置不准确问题修复

yangzj 2 years ago
parent
commit
c2d220e632
1 changed files with 402 additions and 414 deletions
  1. 402 414
      pages/parkingLists/parkingLists.vue

+ 402 - 414
pages/parkingLists/parkingLists.vue

@@ -1,425 +1,413 @@
 <template>
-  <view class="parking">
-    <view class="loading" v-show="loading"><u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" /></view>
-    <view class="parking-header">
-      <u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
-      <u-icon
-        v-if="!searchContent && isShowSearchParking == false"
-        class="icon"
-        name="list"
-        size="44"
-        color="#ffffff"
-        placeholder-color="#B5B5B5"
-        search-icon-color="#B3B3B3"
-        @click="listIconClick"
-      ></u-icon>
-      <u-icon
-        v-if="searchContent || isShowSearchParking == true"
-        class="icon"
-        name="close"
-        size="36"
-        color="#ffffff"
-        placeholder-color="#B5B5B5"
-        search-icon-color="#B3B3B3"
-        @click="clearSearchInput"
-      ></u-icon>
-    </view>
-    <view class="parking-map">
-      <map
-        id="pagemap"
-        style="width: 100%; height: calc(100vh - 240rpx)"
-        :show-location="true"
-        :latitude="latitude"
-        :longitude="longitude"
-        @markertap="markertap"
-        :enable-traffic="true"
-        :enable-zoom="true"
-        :scale="scale"
-        :markers="covers"
-      ></map>
-    </view>
-    <view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'" v-if="nearParkingFlag">
-      <view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown"></view>
-      <scroll-view scroll-y class="address-box-scroll" :style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
-        <view class="address-box-list">
-          <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index" @click="positionAddress(item)">
-            <view class="abli-header">
-              <view class="abli-header-title"
-                >{{ item.roadName }} <text class="abli-header-subtitle">{{ item.areaName }}</text></view
-              >
-              <!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
-              <view class="abli-header-surplus">
-                <view class="abli-header-surplus-left"
-                  >余位<text>{{ item.spaceIdle }}</text></view
-                >
-                <view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }" @click="createMonth(item)">办理包月</view>
-              </view>
-            </view>
-            <view class="abli-bottom">
-              <view class="abli-bottom-left">
-                <view class="abli-bottom-left-navigation" @click="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
-                <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
-              </view>
-              <view class="abli-bottom-right" @click="lookParkingRule(item)">收费规则</view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-    <view class="parking-address-list" v-if="isShowSearchParking">
-      <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
-        <view class="pali-left">
-          <view>{{ item.roadName }}</view>
-          <view>{{ item.areaName }}</view>
-        </view>
-        <view class="pali-right">
-          <image src="../../static/img/distance-icon.png" mode="" @click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
-          <view>路线</view>
-        </view>
-      </view>
-    </view>
-    <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
-    <map id="map" hidden="true"></map>
-    <u-toast ref="uToast" />
-  </view>
+	<view class="parking">
+		<view class="loading" v-show="loading">
+			<u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
+		</view>
+		<view class="parking-header">
+			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange">
+			</u-search>
+			<u-icon v-if="!searchContent && isShowSearchParking == false" class="icon" name="list" size="44"
+				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick"></u-icon>
+			<u-icon v-if="searchContent || isShowSearchParking == true" class="icon" name="close" size="36"
+				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput">
+			</u-icon>
+		</view>
+		<view class="parking-map">
+			<map id="pagemap" style="width: 100%; height: calc(100vh - 240rpx)" :show-location="true"
+				:latitude="latitude" :longitude="longitude" @markertap="markertap" :enable-traffic="true"
+				:enable-zoom="true" :scale="scale" :markers="covers"></map>
+		</view>
+		<view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'"
+			v-if="nearParkingFlag">
+			<view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown">
+			</view>
+			<scroll-view scroll-y class="address-box-scroll"
+				:style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
+				<view class="address-box-list">
+					<view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index"
+						@click="positionAddress(item)">
+						<view class="abli-header">
+							<view class="abli-header-title">{{ item.roadName }} <text
+									class="abli-header-subtitle">{{ item.areaName }}</text></view>
+							<!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
+							<view class="abli-header-surplus">
+								<view class="abli-header-surplus-left">余位<text>{{ item.spaceIdle }}</text></view>
+								<view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }"
+									@click="createMonth(item)">办理包月</view>
+							</view>
+						</view>
+						<view class="abli-bottom">
+							<view class="abli-bottom-left">
+								<view class="abli-bottom-left-navigation"
+									@click="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
+								<view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
+							</view>
+							<view class="abli-bottom-right" @click="lookParkingRule(item)">收费规则</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="parking-address-list" v-if="isShowSearchParking">
+			<view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'"
+				@click="clickSearchParking(item)">
+				<view class="pali-left">
+					<view>{{ item.roadName }}</view>
+					<view>{{ item.areaName }}</view>
+				</view>
+				<view class="pali-right">
+					<image src="../../static/img/distance-icon.png" mode=""
+						@click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
+					<view>路线</view>
+				</view>
+			</view>
+		</view>
+		<u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
+		<map id="map" hidden="true"></map>
+		<u-toast ref="uToast" />
+	</view>
 </template>
 
 <script>
-import { qqMapTransBMap } from '../../utils/mapTrans.js';
-export default {
-  data() {
-    return {
-      searchContent: '',
-      page_map: '',
-      loading: false,
-      latitude: 26.64969,
-      longitude: 106.636453,
-      scale: 16,
-      currentPosition: {
-        latitude: 26.64969,
-        longitude: 106.636453
-      },
-      covers: [],
-      // 附近列表是否显示
-      nearParkingFlag: false,
-      // 轮播选中
-      swiperCurrent: 0,
-      // 附近停车列表
-      nearParkingList: [],
-      // 是否显示停车场列表
-      isShowSearchParking: false,
-      // 搜索停车场列表
-      searchParkingList: [],
-      // 显示单个停车场数据
-      isShowParkingDetail: false,
-      // 单个停车场数据
-      parkingDetailData: {},
-      mapSelect: false,
-      mapSelectList: [
-        {
-          value: '1',
-          label: '腾讯地图'
-        },
-        {
-          value: '2',
-          label: '百度地图'
-        },
-        {
-          value: '3',
-          label: '高德地图'
-        }
-      ],
-      // 选中位置经纬度
-      currentPositionHover: {},
-      nearParkingObj: {
-        height: '60vh',
-        type: 'down'
-      }
-    };
-  },
-  onLoad(page) {
-    this.getLocation();
-    if (page.keyword) {
-      this.searchContent = page.keyword;
-      this.searchInputChange(page.keyword);
-    }
-  },
-  methods: {
-    /**
-     * 查询输入框发生变化
-     * @date 2021-08-10
-     * @param {String} value
-     */
-    searchInputChange(value) {
-      // 为空时关闭搜索列表
-      if (value === '') {
-        this.isShowSearchParking = false;
-      }
-      this.isShowParkingDetail = false;
-      this.getNearRoadsl();
-    },
-    /**
-     * 获取定位
-     * @date 2021-08-10
-     * @returns {any}
-     */
-    getLocation() {
-      const that = this;
-      console.log('请求定位');
-      // that.getNearRoadsl();
-      that.loading = true;
-      if (navigator.geolocation) {
-        // 判断是否有这个对象
-        navigator.geolocation.getCurrentPosition(function (pos) {
-          console.log('经度:' + pos.coords.longitude + '纬度:' + pos.coords.latitude);
-          that.latitude = pos.coords.latitude;
-          that.longitude = pos.coords.longitude;
-          that.currentPosition.latitude = pos.coords.latitude;
-          that.currentPosition.longitude = pos.coords.longitude;
-          that.loading = false;
-          that.getNearRoadsl();
-        });
-      } else {
-        this.$refs.uToast.show({
-          title: '当前系统不支持GPS API',
-          type: 'error'
-        });
-      }
-    },
-    /**
-     * 导航
-     * @date 2021-08-10
-     * @param {Number} latitude
-     * @param {Number} longitude
-     * @returns {any}
-     */
-    navigation(latitude, longitude, areaName) {
-      this.currentPositionHover = {
-        latitude,
-        longitude,
-        areaName
-      };
-      this.mapSelect = true;
-    },
-    // 多地图选择
-    mapSelectConfirm(item) {
-      const name = item[0].label;
-      switch (name) {
-        case '腾讯地图':
-          // uni.navigateTo({
-          //   url:
-          //     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
-          //     this.currentPositionHover.latitude +
-          //     ',' +
-          //     this.currentPositionHover.longitude +
-          //     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-          // });
-          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.latitude},${this.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
-          break;
-        case '百度地图':
-          location.href = `http://api.map.baidu.com/marker?location=
+	import {
+		qqMapTransBMap
+	} from '../../utils/mapTrans.js';
+	export default {
+		data() {
+			return {
+				searchContent: '',
+				page_map: '',
+				loading: false,
+				latitude: 26.64969,
+				longitude: 106.636453,
+				scale: 16,
+				currentPosition: {
+					latitude: 26.64969,
+					longitude: 106.636453
+				},
+				covers: [],
+				// 附近列表是否显示
+				nearParkingFlag: false,
+				// 轮播选中
+				swiperCurrent: 0,
+				// 附近停车列表
+				nearParkingList: [],
+				// 是否显示停车场列表
+				isShowSearchParking: false,
+				// 搜索停车场列表
+				searchParkingList: [],
+				// 显示单个停车场数据
+				isShowParkingDetail: false,
+				// 单个停车场数据
+				parkingDetailData: {},
+				mapSelect: false,
+				mapSelectList: [{
+						value: '1',
+						label: '腾讯地图'
+					},
+					{
+						value: '2',
+						label: '百度地图'
+					},
+					{
+						value: '3',
+						label: '高德地图'
+					}
+				],
+				// 选中位置经纬度
+				currentPositionHover: {},
+				nearParkingObj: {
+					height: '60vh',
+					type: 'down'
+				}
+			};
+		},
+		onLoad(page) {
+			this.getLocation();
+			if (page.keyword) {
+				this.searchContent = page.keyword;
+				this.searchInputChange(page.keyword);
+			}
+		},
+		methods: {
+			/**
+			 * 查询输入框发生变化
+			 * @date 2021-08-10
+			 * @param {String} value
+			 */
+			searchInputChange(value) {
+				// 为空时关闭搜索列表
+				if (value === '') {
+					this.isShowSearchParking = false;
+				}
+				this.isShowParkingDetail = false;
+				this.getNearRoadsl();
+			},
+			/**
+			 * 获取定位
+			 * @date 2021-08-10
+			 * @returns {any}
+			 */
+			getLocation() {
+				const that = this;
+				console.log('请求定位');
+				// that.getNearRoadsl();
+				that.loading = true;
+				if (navigator.geolocation) {
+					// 判断是否有这个对象
+					navigator.geolocation.getCurrentPosition(function(pos) {
+						console.log('经度:' + pos.coords.longitude + '纬度:' + pos.coords.latitude);
+						that.latitude = pos.coords.latitude;
+						that.longitude = pos.coords.longitude;
+						that.currentPosition.latitude = pos.coords.latitude;
+						that.currentPosition.longitude = pos.coords.longitude;
+						that.loading = false;
+						that.getNearRoadsl();
+					});
+				} else {
+					this.$refs.uToast.show({
+						title: '当前系统不支持GPS API',
+						type: 'error'
+					});
+				}
+			},
+			/**
+			 * 导航
+			 * @date 2021-08-10
+			 * @param {Number} latitude
+			 * @param {Number} longitude
+			 * @returns {any}
+			 */
+			navigation(latitude, longitude, areaName) {
+				this.currentPositionHover = {
+					latitude,
+					longitude,
+					areaName
+				};
+				this.mapSelect = true;
+			},
+			// 多地图选择
+			mapSelectConfirm(item) {
+				const name = item[0].label;
+				switch (name) {
+					case '腾讯地图':
+						// uni.navigateTo({
+						//   url:
+						//     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
+						//     this.currentPositionHover.latitude +
+						//     ',' +
+						//     this.currentPositionHover.longitude +
+						//     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+						// });
+						location.href =
+							`https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+						break;
+					case '百度地图':
+						location.href = `http://api.map.baidu.com/marker?location=
 			${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&title=目的地&content=${this.currentPositionHover.areaName}
 			&output=html&src=webapp.baidu.openAPIdemo`;
-          break;
-        case '高德地图':
-          // const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-          // window.location.href = gdurl;
-          location.href = `https://uri.amap.com/navigation?from=${this.longitude},${this.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-          break;
-      }
-    },
-    /**
-     * 清空搜索框内容
-     * @date 2021-08-10
-     * @returns {any}
-     */
-    clearSearchInput() {
-      this.searchContent = '';
-      this.isShowSearchParking = false;
-      this.getNearRoadsl();
-    },
-    /**
-     * 默认首个点放大 如果有传入经纬度则对应的点放大
-     * @date 2021-08-10
-     * @param {Number} lon
-     * @param {Number} lat
-     * @returns {any}
-     */
-    getNearRoadsl(lon, lat) {
-      this.$u.api
-        .nearRoadsl({
-          latitude: this.currentPosition.latitude,
-          longitude: this.currentPosition.longitude,
-          roadName: this.searchContent
-        })
-        .then((res) => {
-          const nearParkingList = []; // 附近停车场列表
-          this.covers = [];
-          res.data.forEach((item, index, arr) => {
-            if (item.latitude && item.longitude) {
-              nearParkingList.push(item);
-              const marker = {
-                latitude: item.latitude,
-                longitude: item.longitude,
-                id: String(index),
-                iconPath: require('./../../static/img/parking-icon.png'),
-                width: 20,
-                height: 25
-              };
-              // 选中经纬度图标变大
-              if (lon && lat) {
-                if (lon === item.longitude && lat === item.latitude) {
-                  marker.width = 40;
-                  marker.height = 50;
-                }
-              } else {
-                if (this.covers.length > 0) {
-                  this.covers[0].width = 40;
-                  this.covers[0].height = 50;
-                }
-              }
-              this.covers.push(marker);
-            }
-          });
-          this.nearParkingList = nearParkingList;
-          if (nearParkingList.length > 0) {
-            this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
-            this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
-          } else {
-            this.$refs.uToast.show({
-              title: '没有相关停车场信息',
-              type: 'warning'
-            });
-          }
-          this.nearParkingFlag = true;
-          if (this.searchContent) {
-            this.searchParkingList = nearParkingList;
-            this.isShowSearchParking = true;
-            this.nearParkingFlag = false;
-          }
-        })
-        .catch((err) => {
-          this.$refs.uToast.show({
-            title: err.msg,
-            type: 'error'
-          });
-        });
-    },
-    /**
-     * 点击地图上的标记点触发
-     **/
-    markertap(e) {
-      let lon, lat;
-      this.covers.forEach((item, index) => {
-        if (e.detail.markerId === item.id) {
-          lon = item.longitude;
-          lat = item.latitude;
-          this.swiperCurrent = index;
-        }
-      });
-      this.getNearRoadsl(lon, lat);
-    },
-    /**
-     * 地址发生变化
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    swiperChange(item) {
-      const map = uni.createMapContext('pagemap');
-      map.moveToLocation({
-        longitude: this.nearParkingList[item.detail.current].longitude,
-        latitude: this.nearParkingList[item.detail.current].latitude
-      });
-      this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail.current].latitude);
-    },
-    /**
-     * 点击单个地址
-     * @date 2022-08-31
-     * @param {any} item
-     * @returns {any}
-     */
-    positionAddress(item) {
-      const map = uni.createMapContext('pagemap');
-      map.moveToLocation({
-        longitude: item.longitude,
-        latitude: item.latitude
-      });
-      this.getNearRoadsl(item.longitude, item.latitude);
-    },
-    /**
-     * 点击单个停车场看详情
-     * @date 2021-08-10
-     * @param {Object} item 为选中项参数
-     * @returns {any}
-     */
-    clickSearchParking(item) {
-      if (item.monthAmount) {
-        this.$u.route({
-          url: 'pages/parkingInformation/parkingInformation',
-          params: {
-            roadInfo: JSON.stringify(item),
-            longitude: this.longitude,
-            latitude: this.latitude
-          }
-        });
-      }
-    },
-    /**
-     * 跳转停车标准页面
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    lookParkingRule(item) {
-      this.$u.route({
-        url: 'pages/chargeStandard/chargeStandard',
-        params: {
-          roadNo: item.roadNo
-        }
-      });
-    },
-    /**
-     * 搜索右侧按钮点击
-     **/
-    listIconClick() {
-      this.isShowSearchParking = true;
-      this.nearParkingFlag = false;
-      this.searchParkingList = this.nearParkingList;
-    },
-    /**
-     * 跳转包月
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    createMonth(item) {
-      if (item.monthAmount) {
-        this.$u.route({
-          url: 'pages/handleMonthly/handleMonthly',
-          params: {
-            roadNo: item.roadNo
-          }
-        });
-      }
-    },
-    pullDown() {
-      if (this.nearParkingObj.height === '20vh') {
-        this.nearParkingObj.height = '60vh';
-        this.nearParkingObj.type = 'down';
-      } else {
-        this.nearParkingObj.height = '20vh';
-        this.nearParkingObj.type = 'up';
-      }
-    }
-  }
-};
+						break;
+					case '高德地图':
+						// const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+						// window.location.href = gdurl;
+						location.href =
+							`https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+						break;
+				}
+			},
+			/**
+			 * 清空搜索框内容
+			 * @date 2021-08-10
+			 * @returns {any}
+			 */
+			clearSearchInput() {
+				this.searchContent = '';
+				this.isShowSearchParking = false;
+				this.getNearRoadsl();
+			},
+			/**
+			 * 默认首个点放大 如果有传入经纬度则对应的点放大
+			 * @date 2021-08-10
+			 * @param {Number} lon
+			 * @param {Number} lat
+			 * @returns {any}
+			 */
+			getNearRoadsl(lon, lat) {
+				this.$u.api
+					.nearRoadsl({
+						latitude: this.currentPosition.latitude,
+						longitude: this.currentPosition.longitude,
+						roadName: this.searchContent
+					})
+					.then((res) => {
+						const nearParkingList = []; // 附近停车场列表
+						this.covers = [];
+						res.data.forEach((item, index, arr) => {
+							if (item.latitude && item.longitude) {
+								nearParkingList.push(item);
+								const marker = {
+									latitude: item.latitude,
+									longitude: item.longitude,
+									id: String(index),
+									iconPath: require('./../../static/img/parking-icon.png'),
+									width: 20,
+									height: 25
+								};
+								// 选中经纬度图标变大
+								if (lon && lat) {
+									if (lon === item.longitude && lat === item.latitude) {
+										marker.width = 40;
+										marker.height = 50;
+									}
+								} else {
+									if (this.covers.length > 0) {
+										this.covers[0].width = 40;
+										this.covers[0].height = 50;
+									}
+								}
+								this.covers.push(marker);
+							}
+						});
+						this.nearParkingList = nearParkingList;
+						if (nearParkingList.length > 0) {
+							this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
+							this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
+						} else {
+							this.$refs.uToast.show({
+								title: '没有相关停车场信息',
+								type: 'warning'
+							});
+						}
+						this.nearParkingFlag = true;
+						if (this.searchContent) {
+							this.searchParkingList = nearParkingList;
+							this.isShowSearchParking = true;
+							this.nearParkingFlag = false;
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: err.msg,
+							type: 'error'
+						});
+					});
+			},
+			/**
+			 * 点击地图上的标记点触发
+			 **/
+			markertap(e) {
+				let lon, lat;
+				this.covers.forEach((item, index) => {
+					if (e.detail.markerId === item.id) {
+						lon = item.longitude;
+						lat = item.latitude;
+						this.swiperCurrent = index;
+					}
+				});
+				this.getNearRoadsl(lon, lat);
+			},
+			/**
+			 * 地址发生变化
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			swiperChange(item) {
+				const map = uni.createMapContext('pagemap');
+				map.moveToLocation({
+					longitude: this.nearParkingList[item.detail.current].longitude,
+					latitude: this.nearParkingList[item.detail.current].latitude
+				});
+				this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail
+					.current].latitude);
+			},
+			/**
+			 * 点击单个地址
+			 * @date 2022-08-31
+			 * @param {any} item
+			 * @returns {any}
+			 */
+			positionAddress(item) {
+				const map = uni.createMapContext('pagemap');
+				map.moveToLocation({
+					longitude: item.longitude,
+					latitude: item.latitude
+				});
+				this.getNearRoadsl(item.longitude, item.latitude);
+			},
+			/**
+			 * 点击单个停车场看详情
+			 * @date 2021-08-10
+			 * @param {Object} item 为选中项参数
+			 * @returns {any}
+			 */
+			clickSearchParking(item) {
+				if (item.monthAmount) {
+					this.$u.route({
+						url: 'pages/parkingInformation/parkingInformation',
+						params: {
+							roadInfo: JSON.stringify(item),
+							longitude: this.currentPosition.longitude,
+							latitude: this.currentPosition.latitude
+						}
+					});
+				}
+			},
+			/**
+			 * 跳转停车标准页面
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			lookParkingRule(item) {
+				this.$u.route({
+					url: 'pages/chargeStandard/chargeStandard',
+					params: {
+						roadNo: item.roadNo
+					}
+				});
+			},
+			/**
+			 * 搜索右侧按钮点击
+			 **/
+			listIconClick() {
+				this.isShowSearchParking = true;
+				this.nearParkingFlag = false;
+				this.searchParkingList = this.nearParkingList;
+			},
+			/**
+			 * 跳转包月
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			createMonth(item) {
+				if (item.monthAmount) {
+					this.$u.route({
+						url: 'pages/handleMonthly/handleMonthly',
+						params: {
+							roadNo: item.roadNo
+						}
+					});
+				}
+			},
+			pullDown() {
+				if (this.nearParkingObj.height === '20vh') {
+					this.nearParkingObj.height = '60vh';
+					this.nearParkingObj.type = 'down';
+				} else {
+					this.nearParkingObj.height = '20vh';
+					this.nearParkingObj.type = 'up';
+				}
+			}
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.wrap {
-  margin-top: 20vh;
-}
+	.wrap {
+		margin-top: 20vh;
+	}
 
-@import './parkingLists.scss';
+	@import './parkingLists.scss';
 </style>