|
|
@@ -1,15 +1,16 @@
|
|
|
<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
|
|
|
+<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
|
|
|
+ @change="searchInputChange"
|
|
|
+ ></u-search>
|
|
|
+ <u-icon
|
|
|
v-if="!searchContent&&isShowSearchParking==false"
|
|
|
class="icon"
|
|
|
name="list"
|
|
|
@@ -17,8 +18,9 @@
|
|
|
color="#ffffff"
|
|
|
placeholder-color="#B5B5B5"
|
|
|
search-icon-color="#B3B3B3"
|
|
|
- @click="listIconClick"></u-icon>
|
|
|
- <u-icon
|
|
|
+ @click="listIconClick"
|
|
|
+ ></u-icon>
|
|
|
+ <u-icon
|
|
|
v-if="searchContent||isShowSearchParking==true"
|
|
|
class="icon"
|
|
|
name="close"
|
|
|
@@ -26,412 +28,409 @@
|
|
|
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="parking-current-address" v-if="nearParkingFlag">
|
|
|
- <swiper class="swiper"
|
|
|
+ @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="parking-current-address" v-if="nearParkingFlag">
|
|
|
+ <swiper class="swiper"
|
|
|
:current="swiperCurrent"
|
|
|
:indicator-dots="false"
|
|
|
:autoplay="false"
|
|
|
previous-margin="30rpx"
|
|
|
next-margin="30rpx"
|
|
|
- @change="swiperChange">
|
|
|
- <swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
|
|
|
- <view class="swiper-item">
|
|
|
- <view @click="clickSearchParking(item)">{{item.roadName}}</view>
|
|
|
- <view>{{item.areaName}}</view>
|
|
|
- <view class="swiper-item-font">
|
|
|
- <view>
|
|
|
- <text>空闲车位</text>
|
|
|
- <text class="yellow-font">{{item.spaceIdle}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="item.monthAmount">
|
|
|
- <text>包月费用</text>
|
|
|
- <text class="yellow-font">{{item.monthAmount}}元</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <text>距离</text>
|
|
|
- <text>{{item.distance|kmUnit}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="swiper-item-button">
|
|
|
- <button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
|
|
|
- <button
|
|
|
- type="default"
|
|
|
- :disabled="!item.monthAmount"
|
|
|
- :class="{'disabled': !item.monthAmount}"
|
|
|
- @click="createMonth(item)">办理包月</button>
|
|
|
- </view>
|
|
|
- <view @click="lookParkingRule(item)">
|
|
|
- <text>点击查看停车规则</text>
|
|
|
- <u-icon name="arrow-right"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <view class="parking-address-list" v-if="isShowSearchParking">
|
|
|
- <view
|
|
|
+ @change="swiperChange"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
|
|
|
+ <view class="swiper-item">
|
|
|
+ <view @click="clickSearchParking(item)">{{item.roadName}}</view>
|
|
|
+ <view>{{item.areaName}}</view>
|
|
|
+ <view class="swiper-item-font">
|
|
|
+ <view>
|
|
|
+ <text>空闲车位</text>
|
|
|
+ <text class="yellow-font">{{item.spaceIdle}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.monthAmount">
|
|
|
+ <text>包月费用</text>
|
|
|
+ <text class="yellow-font">{{item.monthAmount}}元</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>距离</text>
|
|
|
+ <text>{{item.distance|kmUnit}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="swiper-item-button">
|
|
|
+ <button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
|
|
|
+ <button
|
|
|
+ type="default"
|
|
|
+ :disabled="!item.monthAmount"
|
|
|
+ :class="{'disabled': !item.monthAmount}"
|
|
|
+ @click="createMonth(item)">办理包月</button>
|
|
|
+ </view>
|
|
|
+ <view @click="lookParkingRule(item)">
|
|
|
+ <text>点击查看停车规则</text>
|
|
|
+ <u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </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)"></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>
|
|
|
+ @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)"></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 Map from '@/js_sdk/ms-openMap/openMap.js';
|
|
|
- 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: {}
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(page){
|
|
|
- this.getLocation()
|
|
|
- if (page.keyword) {
|
|
|
- this.searchContent = page.keyword
|
|
|
- this.searchInputChange(page.keyword)
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- /*
|
|
|
- * 查询输入框发生变化
|
|
|
- *
|
|
|
- * */
|
|
|
- searchInputChange (value) {
|
|
|
- // 为空时关闭搜索列表
|
|
|
- if (value === '') {
|
|
|
- this.isShowSearchParking = false
|
|
|
- }
|
|
|
- this.isShowParkingDetail = false
|
|
|
- this.getNearRoadsl()
|
|
|
- },
|
|
|
- getLocation(){
|
|
|
- let that = this;
|
|
|
- console.log("请求定位")
|
|
|
- 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',
|
|
|
- })
|
|
|
- };
|
|
|
-
|
|
|
- // uni.getLocation({
|
|
|
- // type:"gcj02",
|
|
|
- // success : function (res) {
|
|
|
- // console.log("定位返回信息:", res);
|
|
|
- // that.latitude = res.latitude;
|
|
|
- // that.longitude = res.longitude;
|
|
|
- // that.currentPosition.latitude = res.latitude
|
|
|
- // that.currentPosition.longitude = res.longitude
|
|
|
- // that.loading = false
|
|
|
- // that.getNearRoadsl()
|
|
|
- // },
|
|
|
- // fail: function(res){
|
|
|
- // this.$refs.uToast.show({
|
|
|
- // title: res,
|
|
|
- // type: 'error',
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- },
|
|
|
- /**
|
|
|
- * 导航
|
|
|
- * */
|
|
|
- navigation (latitude, longitude) {
|
|
|
- this.currentPositionHover = {
|
|
|
- latitude: latitude,
|
|
|
- longitude: longitude
|
|
|
- }
|
|
|
- this.mapSelect = true
|
|
|
- // 腾讯地图用webview
|
|
|
- // uni.navigateTo({
|
|
|
- // url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
|
|
|
- // })
|
|
|
- /* 组件多地图调用 */
|
|
|
- // this.nearParkingFlag = false
|
|
|
- // var options = {
|
|
|
- // destination:{ // 导航终点点坐标和名称
|
|
|
- // latitude: latitude,
|
|
|
- // longitude: longitude,
|
|
|
- // name: "终点"
|
|
|
- // },
|
|
|
- // mapId: "map" // map 组件的 id (微信小程序端必传)
|
|
|
- // }
|
|
|
- // Map.navigation(options)
|
|
|
- },
|
|
|
- // 多地图选择
|
|
|
- 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'
|
|
|
- })
|
|
|
- // 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'
|
|
|
- // })
|
|
|
- break;
|
|
|
- case '百度地图':
|
|
|
- let bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude,this.currentPosition.latitude);//起点坐标
|
|
|
- let bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude,this.currentPositionHover.latitude);//终点坐标
|
|
|
- let baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map';
|
|
|
- console.log('bdpoint',bdOriginPoint);
|
|
|
- console.log('bdCurrPoint',bdCurrPoint);
|
|
|
- let bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${bdCurrPoint.lng}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`;
|
|
|
- console.log('百度地图theurl',bdurl);
|
|
|
- window.location.href = baiduMap;
|
|
|
- // uni.navigateTo({
|
|
|
- // url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`http://api.map.baidu.com/direction?origin=latlng:${this.latitude},${this.longitude}|name:起点&destination=latlng:${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`)}`
|
|
|
- // })
|
|
|
- break;
|
|
|
- case '高德地图':
|
|
|
- let 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`;
|
|
|
- console.log('高德地图theurl',gdurl);
|
|
|
- window.location.href = gdurl;
|
|
|
- // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
|
|
|
- // uni.navigateTo({
|
|
|
- // url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//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`)}`
|
|
|
- // })
|
|
|
- break;
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- clearSearchInput () {
|
|
|
- this.searchContent = '';
|
|
|
- this.isShowSearchParking = false;
|
|
|
- this.getNearRoadsl()
|
|
|
- },
|
|
|
- /**
|
|
|
- * lon,lat 为当前选中点的经纬度
|
|
|
- * 默认首个点放大 如果有传入经纬度则对应的点放大
|
|
|
- * */
|
|
|
- getNearRoadsl(lon, lat){
|
|
|
- // await this.getLocation();
|
|
|
- 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)
|
|
|
- let 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)
|
|
|
- },
|
|
|
- /*
|
|
|
- *地址发生变化
|
|
|
- *
|
|
|
- * */
|
|
|
- swiperChange (item) {
|
|
|
- let 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)
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击单个停车场看详情
|
|
|
- * item 为选中项参数
|
|
|
- * */
|
|
|
- clickSearchParking (item) {
|
|
|
- console.log('clickSearchParking',item)
|
|
|
- // this.parkingDetailData = item
|
|
|
- // this.isShowParkingDetail = true
|
|
|
- // this.latitude = item.latitude
|
|
|
- // this.longitude = item.longitude
|
|
|
- // this.getNearRoadsl(item.longitude, item.latitude)
|
|
|
- // setTimeout(() => {
|
|
|
- // this.isShowSearchParking = false
|
|
|
- // }, 500)
|
|
|
- // this.scale = 18
|
|
|
- this.$u.route({
|
|
|
- url: 'pages/parkingInformation/parkingInformation',
|
|
|
- params:{
|
|
|
- roadInfo:JSON.stringify(item)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 跳转停车标准页面
|
|
|
- * {roadNo} 路段编码
|
|
|
- * */
|
|
|
- lookParkingRule (item) {
|
|
|
- this.$u.route({
|
|
|
- url: 'pages/chargeStandard/chargeStandard',
|
|
|
- params: {
|
|
|
- roadNo: item.roadNo
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /*搜索右侧按钮点击
|
|
|
- */
|
|
|
- listIconClick(){
|
|
|
- this.isShowSearchParking = true;
|
|
|
- this.nearParkingFlag = false;
|
|
|
- this.searchParkingList = this.nearParkingList;
|
|
|
- // this.getNearRoadsl();
|
|
|
- },
|
|
|
- createMonth(item){
|
|
|
- this.$u.route({
|
|
|
- url: 'pages/handleMonthly/handleMonthly',
|
|
|
- params: {
|
|
|
- roadNo:item.roadNo
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import Map from '@/js_sdk/ms-openMap/openMap.js'
|
|
|
+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: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.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) {
|
|
|
+ this.currentPositionHover = {
|
|
|
+ latitude: latitude,
|
|
|
+ longitude: longitude
|
|
|
+ }
|
|
|
+ this.mapSelect = true
|
|
|
+ // 腾讯地图用webview
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
|
|
|
+ // })
|
|
|
+ /* 组件多地图调用 */
|
|
|
+ // this.nearParkingFlag = false
|
|
|
+ // var options = {
|
|
|
+ // destination:{ // 导航终点点坐标和名称
|
|
|
+ // latitude: latitude,
|
|
|
+ // longitude: longitude,
|
|
|
+ // name: "终点"
|
|
|
+ // },
|
|
|
+ // mapId: "map" // map 组件的 id (微信小程序端必传)
|
|
|
+ // }
|
|
|
+ // Map.navigation(options)
|
|
|
+ },
|
|
|
+ // 多地图选择
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ // 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'
|
|
|
+ // })
|
|
|
+ break
|
|
|
+ case '百度地图':
|
|
|
+ const bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude, this.currentPosition.latitude) // 起点坐标
|
|
|
+ const bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude) // 终点坐标
|
|
|
+ const baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map'
|
|
|
+ const bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${bdCurrPoint.lng}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`
|
|
|
+ console.log('百度地图theurl', bdurl)
|
|
|
+ window.location.href = baiduMap
|
|
|
+ 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`
|
|
|
+ console.log('高德地图theurl', gdurl)
|
|
|
+ window.location.href = gdurl
|
|
|
+ // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//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`)}`
|
|
|
+ // })
|
|
|
+ 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 2021-08-10
|
|
|
+ * @param {Object} item 为选中项参数
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ clickSearchParking (item) {
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/parkingInformation/parkingInformation',
|
|
|
+ params: {
|
|
|
+ roadInfo: JSON.stringify(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 跳转停车标准页面
|
|
|
+ * @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) {
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/handleMonthly/handleMonthly',
|
|
|
+ params: {
|
|
|
+ roadNo: item.roadNo
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .wrap{margin-top: 20vh;}
|
|
|
- @import url("./parkingLists.scss");
|
|
|
+.wrap{margin-top: 20vh;}
|
|
|
+@import url("./parkingLists.scss");
|
|
|
</style>
|
