|
|
@@ -2,11 +2,12 @@
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<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>
|
|
|
<title>location_list</title>
|
|
|
<script src="js/axios.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>
|
|
|
.container {
|
|
|
|
|
|
@@ -82,9 +83,11 @@
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<td>id</td>
|
|
|
- <td>事件</td>
|
|
|
- <td>地点</td>
|
|
|
- <td>信息</td>
|
|
|
+ <td>时间</td>
|
|
|
+ <td>经纬度</td>
|
|
|
+ <td>附加信息</td>
|
|
|
+ <td>猜测位置</td>
|
|
|
+ <td>与我大概距离</td>
|
|
|
<td>操作</td>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
@@ -97,6 +100,8 @@
|
|
|
target="_blank">{{item.location_xy}}</a>
|
|
|
</td>
|
|
|
<td>{{item.msg}}</td>
|
|
|
+ <td>{{item.location_str}}</td>
|
|
|
+ <td>{{item['distance']}}</td>
|
|
|
<td>
|
|
|
<span @click="to_update(item)">跳转更新</span>
|
|
|
<span> | | | | </span>
|
|
|
@@ -124,8 +129,8 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
-
|
|
|
<script>
|
|
|
+
|
|
|
Date.prototype.format = function (fmt) {
|
|
|
var o = {
|
|
|
"M+": this.getMonth() + 1, //月份
|
|
|
@@ -147,10 +152,29 @@
|
|
|
return fmt;
|
|
|
}
|
|
|
|
|
|
- const scrollElement = (el)=>{
|
|
|
+ const scrollElement = (el) => {
|
|
|
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({
|
|
|
el: '#tby',
|
|
|
@@ -168,6 +192,22 @@
|
|
|
this.search();
|
|
|
},
|
|
|
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) {
|
|
|
if (confirm("确定要删除吗？不可恢复！！！")) {
|
|
|
axios.get("https://api.tianyunperfect.cn/web_history/location_delete", {
|
