Ana Sayfa Keşfet Yardım
Giriş Yap
tianyunperfect
/
web-base--
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

update

tianyunperfect 2 yıl önce
ebeveyn
640d7647c5
işleme
3e09fd016e
2 değiştirilmiş dosya ile 66 ekleme ve 9 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 20 3
      simple-demo/location.html
  2. 46 6
      simple-demo/location_list.html

+ 20 - 3
simple-demo/location.html
Dosyayı Görüntüle 

@@ -6,8 +6,7 @@
 
     <title>location</title>
 
     <title>location</title>
 
     <script src="js/axios.min.js"></script>
 
     <script src="js/axios.min.js"></script>
 
     <script src="https://web.tianyunperfect.cn/util.js"></script>
 
     <script src="https://web.tianyunperfect.cn/util.js"></script>
 
-    <script type="text/javascript"
 
-            src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
 
+    <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <textarea id="msg" style="width: 100%; font-size: 25px" rows="10"></textarea>
 
 <textarea id="msg" style="width: 100%; font-size: 25px" rows="10"></textarea>
 
@@ -37,8 +36,24 @@
 
 <script>
 
 <script>
 
     let longitude;
 
     let longitude;
 
     let latitude;
 
     let latitude;
 
+    let locationStr = '';
 
     let status = false;
 
     let status = false;
 
 
 
+    // 获取地址位置的名字
 
+    function getLocationStr() {
 
+        var map = new BMap.Map("l-map");
 
+        // 创建地理编码实例, 并配置参数获取乡镇级数据
 
+        var myGeo = new BMap.Geocoder({extensions_town: true});
 
+        // 根据坐标得到地址描述
 
+        myGeo.getLocation(new BMap.Point(longitude, latitude), function (result) {
 
+            if (result) {
 
+                locationStr = result.address;
 
+            } else {
 
+                return "未知";
 
+            }
 
+        });
 
+    }
 
+    // 获取经纬度
 
     function getLocation() {
 
     function getLocation() {
 
         // 创建百度地理位置实例，代替 navigator.geolocation
 
         // 创建百度地理位置实例，代替 navigator.geolocation
 
         var geolocation = new BMap.Geolocation();
 
         var geolocation = new BMap.Geolocation();
 
@@ -47,11 +62,13 @@
 
                 // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
 
                 // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
 
                 latitude = e.point.lat;
 
                 latitude = e.point.lat;
 
                 longitude = e.point.lng;
 
                 longitude = e.point.lng;
 
+                getLocationStr();
 
             } else {
 
             } else {
 
             }
 
             }
 
         });
 
         });
 
     }
 
     }
 
 
 
+
 
     getLocation();
 
     getLocation();
 
 
 
     setTimeout(() => {
 
     setTimeout(() => {
 
@@ -74,7 +91,7 @@
 
 
 
     function sendMsg() {
 
     function sendMsg() {
 
         axios.post("https://api.tianyunperfect.cn/web_history/location_history", {
 
         axios.post("https://api.tianyunperfect.cn/web_history/location_history", {
 
-            "location_str": "",
 
+            "location_str": locationStr,
 
             "location_xy": latitude + "," + longitude,
 
             "location_xy": latitude + "," + longitude,
 
             "msg": document.querySelector("#msg").value,
 
             "msg": document.querySelector("#msg").value,
 
             "create_time": new Date().format('yyyy-MM-dd hh:mm:ss'),
 
             "create_time": new Date().format('yyyy-MM-dd hh:mm:ss'),

+ 46 - 6
simple-demo/location_list.html
Dosyayı Görüntüle 

@@ -2,11 +2,12 @@
 
 <html lang="en">
 
 <html lang="en">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
 
     <script src="https://web.tianyunperfect.cn/util.js"></script>
 
     <script src="https://web.tianyunperfect.cn/util.js"></script>
 
     <title>location_list</title>
 
     <title>location_list</title>
 
     <script src="js/axios.min.js"></script>
 
     <script src="js/axios.min.js"></script>
 
     <script src="js/vue.min.js"></script>
 
     <script src="js/vue.min.js"></script>
 
+    <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
 
     <style>
 
     <style>
 
         .container {
 
         .container {
 
 
 
@@ -82,9 +83,11 @@
 
         <thead>
 
         <thead>
 
         <tr>
 
         <tr>
 
             <td>id</td>
 
             <td>id</td>
 
-            <td>事件</td>
 
-            <td>地点</td>
 
-            <td>信息</td>
 
+            <td>时间</td>
 
+            <td>经纬度</td>
 
+            <td>附加信息</td>
 
+            <td>猜测位置</td>
 
+            <td>与我大概距离</td>
 
             <td>操作</td>
 
             <td>操作</td>
 
         </tr>
 
         </tr>
 
         </thead>
 
         </thead>
 
@@ -97,6 +100,8 @@
 
                    target="_blank">{{item.location_xy}}</a>
 
                    target="_blank">{{item.location_xy}}</a>
 
             </td>
 
             </td>
 
             <td>{{item.msg}}</td>
 
             <td>{{item.msg}}</td>
 
+            <td>{{item.location_str}}</td>
 
+            <td>{{item['distance']}}</td>
 
             <td>
 
             <td>
 
                 <span @click="to_update(item)">跳转更新</span>
 
                 <span @click="to_update(item)">跳转更新</span>
 
                 <span> | | | | </span>
 
                 <span> | | | | </span>
 
@@ -124,8 +129,8 @@
 
 </div>
 
 </div>
 
 
 
 
 
-
 
 <script>
 
 <script>
 
+
 
     Date.prototype.format = function (fmt) {
 
     Date.prototype.format = function (fmt) {
 
         var o = {
 
         var o = {
 
             "M+": this.getMonth() + 1,                 //月份
 
             "M+": this.getMonth() + 1,                 //月份
 
@@ -147,10 +152,29 @@
 
         return fmt;
 
         return fmt;
 
     }
 
     }
 
 
 
-    const scrollElement = (el)=>{
 
+    const scrollElement = (el) => {
 
         document.querySelector(el).scrollIntoView({behavior: 'smooth'});
 
         document.querySelector(el).scrollIntoView({behavior: 'smooth'});
 
     }
 
     }
 
+    let longitude = '';
 
+    let latitude;
 
+
 
+    // 获取经纬度
 
+    function getLocation() {
 
+        // 创建百度地理位置实例，代替 navigator.geolocation
 
+        var geolocation = new BMap.Geolocation();
 
+        geolocation.getCurrentPosition(function (e) {
 
+            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
 
+                // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
 
+                latitude = e.point.lat;
 
+                longitude = e.point.lng;
 
+
 
+                _this.updateLocationStr();
 
+            } else {
 
+            }
 
+        });
 
+    }
 
 
 
+    getLocation();
 
 
 
     let _this = new Vue({
 
     let _this = new Vue({
 
         el: '#tby',
 
         el: '#tby',
 
@@ -168,6 +192,22 @@
 
             this.search();
 
             this.search();
 
         },
 
         },
 
         methods: {
 
         methods: {
 
+            updateLocationStr() {
 
+                for (const item of _this.list) {
 
+                    if (item.location_xy.indexOf("un") < 0 && longitude.toString().length > 2) {
 
+                        let split = item.location_xy.split(",");
 
+                        item['distance'] = _this.getDistance(split[1], split[0], longitude, latitude);
 
+                    }
 
+                }
 
+                _this.$forceUpdate();
 
+            },
 
+            getDistance(lon1, lat1, lon2, lat2) {
 
+                const map = new BMap.Map("allmap");
 
+                const pointA = new BMap.Point(lon1, lat1);  // 创建点坐标A
 
+                const pointB = new BMap.Point(lon2, lat2);  // 创建点坐标B
 
+                const range = map.getDistance(pointA, pointB).toFixed(2);  //获取两点距离,保留小数点后两位
 
+                return range;
 
+            },
 
             delete_by_id: function (id) {
 
             delete_by_id: function (id) {
 
                 if (confirm("确定要删除吗？不可恢复！！！")) {
 
                 if (confirm("确定要删除吗？不可恢复！！！")) {
 
                     axios.get("https://api.tianyunperfect.cn/web_history/location_delete", {
 
                     axios.get("https://api.tianyunperfect.cn/web_history/location_delete", {