tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录</title>
    <script src="https://web.tianyunperfect.cn/simple/js/util.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
    <style>
        #getLocationBtn {
            transform: scale(3);
        }
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var app = document.body;
            var startY;
            var dist;
            var threshold = 100; // 下拉刷新的阈值

            app.addEventListener('touchstart', function(e) {
                startY = e.touches[0].clientY;
            });

            app.addEventListener('touchmove', function(e) {
                dist = e.touches[0].clientY - startY;
                if (dist > threshold) {
                    // 执行刷新操作
                    location.reload();
                }
            });
        });
    </script>
</head>
<body>
<div id="app" class="container">
    <div class="row justify-content-center mt-5">
        <button id="getLocationBtn" class="btn btn-primary btn-lg" v-on:click="sendLocationToBackend">记录</button>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
<script>


    const app = new Vue({
        el: '#app',
        data: {
            longitude: "0",
            latitude: "0",
            locationStr: "未知"
        },
        mounted: function () {
            this.getLocation();
        },
        methods: {
            // 获取地址位置的名字
            getLocationStr: function (longitude, latitude) {
                // 创建地理编码实例, 并配置参数获取乡镇级数据
                const myGeo = new BMap.Geocoder({extensions_town: true});
                // 根据坐标得到地址描述
                myGeo.getLocation(new BMap.Point(longitude, latitude), function (result) {
                    if (result) {
                        app.locationStr = result.address;
                    }
                });
            },

            // 获取经纬度
            getLocation: function () {
                // 创建百度地理位置实例，代替 navigator.geolocation
                let _this = this;
                const geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (e) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                        _this.latitude = e.point.lat;
                        _this.longitude = e.point.lng;
                        _this.getLocationStr(_this.longitude, _this.latitude);
                    }
                });
            },
            sendLocationToBackend: async function () {
                const data = {
                    location: app.locationStr,
                    longitude: app.longitude,
                    latitude: app.latitude,
                    created_by: "b90c0cf6997d4cfa987f2bc59583fcaa"
                };
                axios.post('https://api.tianyunperfect.cn/location/point', data)
                    .then(function (response) {
                        console.log(response.data);
                        let res = response.data;
                        showMsg(res.message, 2);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
</script>
</body>
</html>