定位问题

pages/parkingLists/parkingLists.scss

@@ -325,22 +325,22 @@
 }
 .address-box {
   width: calc(100% - 60rpx);
-	height: 70vh;
+  height: 70vh;
   padding: 15rpx 0;
   position: absolute;
   left: 30rpx;
   bottom: 0;
   z-index: 1000;
   background-color: #f9f9f9;
-	transition: height .5s linear;
+  transition: height 0.5s linear;
   &-down-icon {
     width: 32rpx;
     height: 28rpx;
     margin: 0 auto;
     background: url('./../../static/img/down-icon.svg') no-repeat center center;
     background-size: 100% 100%;
-		transform: rotate(0deg);
-		transition: transform 0.5s linear;
+    transform: rotate(0deg);
+    transition: transform 0.5s linear;
   }
   .up-icon {
     transform: rotate(180deg);
@@ -434,8 +434,24 @@
   }
 }
 .address-down {
-	height: 60vh;
+  height: 60vh;
 }
 .address-up {
-	height: 20vh;
+  height: 20vh;
+}
+.abli-bottom-left-navigation-disabled {
+  color: #666666;
+  font-size: 26rpx;
+  border-right: solid 1px #cccccc;
+  padding-right: 20rpx;
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 40rpx;
+    height: 31rpx;
+    background: url('/static/img/navigation-icon.svg') no-repeat center center;
+    background-size: 100% 100%;
+    margin-right: 10rpx;
+    vertical-align: middle;
+  }
 }

pages/parkingLists/parkingLists.vue

@@ -70,7 +70,13 @@
             </view>
             <view class="abli-bottom">
               <view class="abli-bottom-left">
-                <view class="abli-bottom-left-navigation" @click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
+                <view
+                  class="abli-bottom-left-navigation"
+                  v-if="currentPosition.latitude && currentPosition.longitude"
+                  @click.stop="navigation(item.latitude, item.longitude, item.roadName || item.parkName)"
+                  >导航</view
+                >
+                <view class="abli-bottom-left-navigation-disabled" @click="disabledNavigation" v-else>导航</view>
                 <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
               </view>
               <view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
@@ -88,8 +94,16 @@
           <view>{{ item.roadName || item.parkName }}</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 class="pali-right" v-if="currentPosition.latitude && currentPosition.longitude">
+          <image
+            src="../../static/img/distance-icon.png"
+            mode=""
+            @click.stop="navigation(item.latitude, item.longitude, item.roadName || item.parkName)"
+          ></image>
+          <view>路线</view>
+        </view>
+        <view class="pali-right" v-else>
+          <image src="../../static/img/distance-icon.png" mode="" @click.stop="disabledNavigation"></image>
           <view>路线</view>
         </view>
       </view>
@@ -123,8 +137,8 @@ export default {
       longitude: 106.636453,
       scale: 16,
       currentPosition: {
-        latitude: 26.64969,
-        longitude: 106.636453
+        latitude: '',
+        longitude: ''
       },
       covers: [],
       // 附近列表是否显示
@@ -199,6 +213,10 @@ export default {
       console.log('请求定位');
       that.loading = true;
       if (navigator.geolocation) {
+        const obj = {
+          0: 'getNearRoadsl',
+          1: 'getParkingLotList'
+        };
         // 判断是否有这个对象
         navigator.geolocation.getCurrentPosition(
           function (pos) {
@@ -209,36 +227,30 @@ export default {
             that.currentPosition.latitude = pos.coords.latitude;
             that.currentPosition.longitude = pos.coords.longitude;
             that.loading = false;
-            const obj = {
-              0: 'getNearRoadsl',
-              1: 'getParkingLotList'
-            };
             that[obj[that.tabObj.current]]();
           },
           function (err) {
             console.log('浏览器获取位置失败:', JSON.stringify(err));
-            uni.getLocation({
-              type: 'gcj02',
-              success: function (res) {
-                console.log('当前位置的经度：' + res.longitude);
-                console.log('当前位置的纬度：' + res.latitude);
-                that.currentPosition.latitude = res.latitude;
-                that.currentPosition.longitude = res.longitude;
-                that.loading = false;
-                const obj = {
-                  0: 'getNearRoadsl',
-                  1: 'getParkingLotList'
-                };
-                that[obj[that.tabObj.current]]();
-              }
+            that.loading = false;
+            that.$refs.uToast.show({
+              title: '您已拒绝授权位置信息或者获取位置信息失败!',
+              type: 'error',
+              duration: 4000
             });
+            that[obj[that.tabObj.current]]();
+          },
+          {
+            timeout: 15000
           }
         );
       } else {
-        this.$refs.uToast.show({
+        that.loading = false;
+        that.$refs.uToast.show({
           title: '当前系统不支持GPS API',
-          type: 'error'
+          type: 'error',
+          duration: 4000
         });
+        that[obj[that.tabObj.current]]();
       }
     },
     /**
@@ -256,29 +268,27 @@ export default {
       };
       this.mapSelect = true;
     },
+    disabledNavigation() {
+      this.$refs.uToast.show({
+        title: '您已拒绝授权位置信息或者获取位置信息失败,无法使用导航功能!',
+        type: 'error'
+      });
+    },
     // 多地图选择
     mapSelectConfirm(item) {
       const name = item[0].label;
       switch (name) {
         case '腾讯地图':
-          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${
-            this.currentPosition.longitude
-          }&to=${this.currentPositionHover.areaName || item.parkName}&tocoord=${this.currentPositionHover.latitude},${
-            this.currentPositionHover.longitude
-          }&policy=1&referer=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 '百度地图':
           const lnglatObj = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude);
           location.href = `http://api.map.baidu.com/marker?location=
-			${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName || item.parkName}
+			${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName}
 			&output=html&src=webapp.baidu.openAPIdemo`;
           break;
         case '高德地图':
-          location.href = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${
-            this.currentPositionHover.longitude
-          },${this.currentPositionHover.latitude},${
-            this.currentPositionHover.areaName || item.parkName
-          }&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          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;
       }
     },