|
|
@@ -10,7 +10,7 @@ |
|
|
|
<div class="bottom"> |
|
|
|
<div class="address"> |
|
|
|
<div class="title"> |
|
|
|
<p>{{ params.address }}</p> |
|
|
|
<p>{{ alarm.address }}(附近)</p> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
<span>{{ params.time }}</span> |
|
|
@@ -22,7 +22,7 @@ |
|
|
|
:key="index" |
|
|
|
:type="item.type" |
|
|
|
:icon="item.icon" |
|
|
|
@click="onClick(item.name)" |
|
|
|
@click="onErrorReport(item.name)" |
|
|
|
>{{ item.text }}</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@@ -51,7 +51,7 @@ export default { |
|
|
|
title: '进入涉水区域警报', |
|
|
|
alarm: { |
|
|
|
message: '你的孩子靠近水域危险区', |
|
|
|
address: '桂城街道深海路25号平洲桂城广东天波教育科技有限公司', |
|
|
|
address: '', |
|
|
|
time: '2023-03-14 14:16:55', |
|
|
|
glng: '113.175203274874', |
|
|
|
glat: '23.0261293630648' |
|
|
@@ -105,6 +105,7 @@ export default { |
|
|
|
this.$store.commit("gatewayToken", res.data.data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 获取路由参数 |
|
|
|
getParams() { |
|
|
|
let params = this.$route.query; |
|
|
|
if (isNotNull(params)) { |
|
|
@@ -125,7 +126,7 @@ export default { |
|
|
|
// 初始化地图 |
|
|
|
initAmap() { |
|
|
|
this.$toast.loading('地图加载中'); |
|
|
|
MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation' ]).then( |
|
|
|
MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.ToolBar' ]).then( |
|
|
|
AMap => { |
|
|
|
this.map.instance = new AMap.Map("details_map", { |
|
|
|
center: [this.params.lng, this.params.lat], |
|
|
@@ -133,11 +134,15 @@ export default { |
|
|
|
zoom: this.map.zoom, |
|
|
|
zoomEnable: true |
|
|
|
}); |
|
|
|
// 构建逆地理编码器 |
|
|
|
this.map.geocoder = new AMap.Geocoder({ |
|
|
|
extensions: "all" |
|
|
|
}); |
|
|
|
const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'RB' }); |
|
|
|
this.map.instance.addControl(toolBar); |
|
|
|
this.initCenterMarker(); |
|
|
|
this.$toast.success('地图加载完成'); |
|
|
|
this.geocoder([this.params.lng, this.params.lat]); |
|
|
|
}, |
|
|
|
err => { |
|
|
|
this.$toast.clear(); |
|
|
@@ -172,10 +177,13 @@ export default { |
|
|
|
}); |
|
|
|
this.map.instance.add(this.map.centerMarker); |
|
|
|
}, |
|
|
|
// 逆地理编码,通过坐标获取详细中文地址 |
|
|
|
geocoder(lngLat) { |
|
|
|
this.map.geocoder.getAddress(lngLat, (status, result) => { |
|
|
|
if (status == "complete" && result.info == "OK") { |
|
|
|
this.currentAddress.address = result.regeocode.formattedAddress; |
|
|
|
this.alarm.address = result.regeocode.formattedAddress; |
|
|
|
console.log("当前地址", this.currentAddress.address); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
@@ -216,7 +224,8 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
onClick(name) { |
|
|
|
// 误报 |
|
|
|
onErrorReport(name) { |
|
|
|
if(name === 'goHere') { |
|
|
|
// 根据选择的地图跳转不同地图app的url |
|
|
|
this.actionSheetShow = true; |
|
|
@@ -234,6 +243,7 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 误报接口 |
|
|
|
drownReportFilterAdd() { |
|
|
|
this.$toast.loading('设置中'); |
|
|
|
let reqBody = { |
|
|
@@ -259,6 +269,7 @@ export default { |
|
|
|
},1500) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 选择打开外部地图app |
|
|
|
onSelect(item) { |
|
|
|
if(item.number === 0) { |
|
|
|
// 高德 |
|
|
@@ -267,11 +278,13 @@ export default { |
|
|
|
this.wakeUpTencentMap(item.wakeUpUrl); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 唤醒高德地图 |
|
|
|
wakeUpGaodeMap(wakeUpUrl) { |
|
|
|
const position = this.params.lng + ',' +this.params.lat; |
|
|
|
const name = this.params.address; |
|
|
|
window.location.href = `${wakeUpUrl}position=${position}&name=${name}&callnative=1`; |
|
|
|
}, |
|
|
|
// 唤醒 腾讯地图 |
|
|
|
wakeUpTencentMap(wakeUpUrl) { |
|
|
|
const position = this.params.lat + ',' + this.params.lng ; |
|
|
|
const address = this.params.address; |
|
|
@@ -279,6 +292,7 @@ export default { |
|
|
|
const myAppName = 'ssjlqqmap'; |
|
|
|
window.location.href = `${wakeUpUrl}type=0&marker=coord:${position};title:${address};addr:${address}&key=${key}&referer=${myAppName}`; |
|
|
|
}, |
|
|
|
// 刷新 |
|
|
|
onRefresh() { |
|
|
|
this.reload(); |
|
|
|
} |
|
|
|