Task H5定位

src/components/Map/MapGisLine.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
 <!--    <p class="fuTitle">地块位置绘制</p>-->
-    <div id="full-screen-acceptance" style="width: 100%;height:71vh;">
+    <div id="full-screen-acceptance" style="width: 100%;height:71vh; position: relative;">
         <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
         <div id='land-btn-wrap'>
             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
@@ -11,6 +11,8 @@
             <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
             <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
         </div>
+
+        <div v-if="hasSelectLocationMode" class="location-mode-chooser-btn"><input type="button" class="ant-btn ant-btn-red" value="选择定位方式" @click="selectLocationMode"/></div>
       </div>
     <div style="font-size: 13px; padding-top: 5px;">备注：绿色地块表示该地块，蓝色表示本账套已标记的其他地块</div>
     <div id="info" style="display: none"></div>
@@ -44,6 +46,20 @@ export default {
     // 获取村边界的图层名称
     this.getVillageBorderLayerName();
   },
+  computed: {
+    isAndroid() {
+      return !!window._Native_object;
+    },
+    hasSelectLocationMode() {
+      return this.isAndroid && typeof(window._Native_object.SelectLocationMode) === 'function';
+    },
+    hasGetLocationTimeout() {
+      return this.isAndroid && typeof(window._Native_object.GetLocationTimeout) === 'function';
+    },
+    hasGetLocationMode() {
+      return this.isAndroid && typeof(window._Native_object.GetLocationMode) === 'function';
+    },
+  },
   methods: {
     // 获取geoserver的地址
     getGeoServerUrl() {
@@ -74,34 +90,68 @@ export default {
         return v.toString(16);
       });
     },
+    selectLocationMode() {
+      if(this.hasSelectLocationMode)
+      {
+        let res = window._Native_object.SelectLocationMode();
+        console.log('当前选择定位模式: ' + res);
+      }
+    },
+    getLocationMode() {
+      let mode = '';
+      if(this.hasGetLocationMode)
+      {
+        mode = window._Native_object.GetLocationMode();
+      }
+      console.log('当前选择定位模式: ' + mode);
+      return mode;
+    },
+    getLocationTimeout() {
+      let timeout = 30000;
+      if(this.isAndroid)
+      {
+        let to = window._Native_object.GetLocationTimeout();
+        if(to <= 0)
+          to = 30000;
+        timeout = to;
+      }
+      console.log('当前选择定位超时: ' + timeout);
+      return timeout;
+    },
     getCurrentLocation(callback) {
       // 1. 首先尝试Android宿主端
-      if(window._Native_object) // Android层注入全局对象
+      if(this.isAndroid) // Android层注入全局对象
       {
-        console.log('使用Native获取定位');
-        let coord = window._Native_object.GetLocation(null);
-        console.log('Native坐标: ' + coord);
-        if(coord)
+        let mode = this.getLocationMode();
+        if(mode !== 'h5')
         {
-          let arr = coord.split(',');
-          let res = {
-            code: 200,
-            data: {
-              lng: arr[0],
-              lat: arr[1],
-            },
-          };
-          callback(res);
-          return;
+          console.log('使用Native获取定位');
+          let coord = window._Native_object.GetLocation(null);
+          console.log('Native坐标: ' + coord);
+          if(coord)
+          {
+            let arr = coord.split(',');
+            let res = {
+              code: 200,
+              data: {
+                lng: arr[0],
+                lat: arr[1],
+              },
+            };
+            callback(res);
+            return;
+          }
         }
       }
 
       // 2. 再尝试浏览器
       if (navigator.geolocation) {
         console.log('使用浏览器获取定位');
+        let timeout = this.getLocationTimeout();
         navigator.geolocation.getCurrentPosition(
           (position) => {
             const { latitude, longitude } = position.coords;
+            console.log('浏览器定位结果: 经纬度=' + longitude + ', ' + latitude);1
             let res = {
               code: 200,
               data: {
@@ -115,7 +165,7 @@ export default {
             console.log('定位失败: ' + error.message);
             getQueryLand().then(callback);
           },
-          { enableHighAccuracy: true, timeout: 5000 }
+          { enableHighAccuracy: true, timeout: timeout }
         );
         return;
       }
@@ -633,4 +683,10 @@ export default {
   z-index: 2000;
   padding-top: 5%;
 }
+.location-mode-chooser-btn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+}
 </style>

src/components/Map/MapGisTagDTGCopy.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="full-screen-acceptance" style="width: 100%;height:71vh;">
+    <div id="full-screen-acceptance" style="width: 100%;height:71vh; position: relative;">
       <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
       <div id='land-btn-wrap' v-show="showBtn">
         <input :id="locationMap" type="button" class="ant-btn ant-btn-red" value="定位"/>&nbsp;&nbsp;
@@ -8,6 +8,8 @@
         <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
         <input :id="this.drawResetMap" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
       </div>
+
+      <div v-if="hasSelectLocationMode" class="location-mode-chooser-btn"><input type="button" class="ant-btn ant-btn-red" value="选择定位方式" @click="selectLocationMode"/></div>
     </div>
     <div style="font-size: 1.4vh; padding-top: 5px;">备注：黄色标记表示该资产，蓝色标记表示本账套已标记的其他资产</div>
     <div id="info" style="display: none"></div>
@@ -40,6 +42,20 @@
       // 获取村边界的图层名称
       this.getVillageBorderLayerName();
     },
+    computed: {
+      isAndroid() {
+        return !!window._Native_object;
+      },
+      hasSelectLocationMode() {
+        return this.isAndroid && typeof(window._Native_object.SelectLocationMode) === 'function';
+      },
+      hasGetLocationTimeout() {
+        return this.isAndroid && typeof(window._Native_object.GetLocationTimeout) === 'function';
+      },
+      hasGetLocationMode() {
+        return this.isAndroid && typeof(window._Native_object.GetLocationMode) === 'function';
+      },
+    },
     methods: {
       // 获取geoserver的地址
       getGeoServerUrl() {
@@ -70,34 +86,68 @@
           return v.toString(16);
         });
       },
+      selectLocationMode() {
+        if(this.hasSelectLocationMode)
+        {
+          let res = window._Native_object.SelectLocationMode();
+          console.log('当前选择定位模式: ' + res);
+        }
+      },
+      getLocationMode() {
+        let mode = '';
+        if(this.hasGetLocationMode)
+        {
+          mode = window._Native_object.GetLocationMode();
+        }
+        console.log('当前选择定位模式: ' + mode);
+        return mode;
+      },
+      getLocationTimeout() {
+        let timeout = 10000;
+        if(this.hasGetLocationMode)
+        {
+          let to = window._Native_object.GetLocationTimeout();
+          if(to <= 0)
+            to = 30000;
+          timeout = to;
+        }
+        console.log('当前选择定位超时: ' + timeout);
+        return timeout;
+      },
       getCurrentLocation(callback) {
         // 1. 首先尝试Android宿主端
-        if(window._Native_object) // Android层注入全局对象
+        if(this.isAndroid) // Android层注入全局对象
         {
-          console.log('使用Native获取定位');
-          let coord = window._Native_object.GetLocation(null);
-          console.log('Native坐标: ' + coord);
-          if(coord)
+          let mode = this.getLocationMode();
+          if(mode !== 'h5')
           {
-            let arr = coord.split(',');
-            let res = {
-              code: 200,
-              data: {
-                lng: arr[0],
-                lat: arr[1],
-              },
-            };
-            callback(res);
-            return;
+            console.log('使用Native获取定位');
+            let coord = window._Native_object.GetLocation(null);
+            console.log('Native坐标: ' + coord);
+            if(coord)
+            {
+              let arr = coord.split(',');
+              let res = {
+                code: 200,
+                data: {
+                  lng: arr[0],
+                  lat: arr[1],
+                },
+              };
+              callback(res);
+              return;
+            }
           }
         }
 
         // 2. 再尝试浏览器
         if (navigator.geolocation) {
           console.log('使用浏览器获取定位');
+          let timeout = this.getLocationTimeout();
           navigator.geolocation.getCurrentPosition(
             (position) => {
               const { latitude, longitude } = position.coords;
+              console.log('浏览器定位结果: 经纬度=' + longitude + ', ' + latitude);
               let res = {
                 code: 200,
                 data: {
@@ -111,7 +161,7 @@
               console.log('定位失败: ' + error.message);
               getQueryLand().then(callback);
             },
-            { enableHighAccuracy: true, timeout: 5000 }
+            { enableHighAccuracy: true, timeout: timeout }
           );
           return;
         }
@@ -710,4 +760,10 @@
     z-index: 2000;
     padding-top: 5%;
   }
+  .location-mode-chooser-btn {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+  }
 </style>