tianyunperfect
/
web-base--


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!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">
</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 class="row justify-content-center mt-3">
        <label for="longitude">经度:</label>
        <label id="longitude" class="ml-2">{{longitude}}</label>
    </div>
    <div class="row justify-content-center mt-2">
        <label for="latitude">纬度:</label>
        <label id="latitude" class="ml-2">{{latitude}}</label>
    </div>
    <div class="row justify-content-center mt-2">
        <label for="locationStr">位置:</label>
        <label id="locationStr" class="ml-2">{{locationStr}}</label>
    </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>