|
|
@@ -0,0 +1,94 @@
|
|
|
+<!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" v-model="longitude" class="ml-2"></label>
|
|
|
+ </div>
|
|
|
+ <div class="row justify-content-center mt-2">
|
|
|
+ <label for="latitude">纬度:</label>
|
|
|
+ <label id="latitude" v-model="latitude" class="ml-2"></label>
|
|
|
+ </div>
|
|
|
+ <div class="row justify-content-center mt-2">
|
|
|
+ <label for="locationStr">位置:</label>
|
|
|
+ <label id="locationStr" v-model="locationStr" class="ml-2"></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: "未知",
|
|
|
+ latitude: "未知",
|
|
|
+ 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>
|
tianyun