|
|
|
@@ -0,0 +1,315 @@ |
|
|
|
<template> |
|
|
|
<div class="alarm-container"> |
|
|
|
<van-nav-bar :title="title" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar> |
|
|
|
<div id="details_map" class="details_map" style="width: 100%;height: 100vh"></div> |
|
|
|
<div class="notice">{{ alarm.message + '' }}</div> |
|
|
|
<div class="refresh"> |
|
|
|
<van-icon name="replay" size="25"/> |
|
|
|
<span>刷新</span> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<div class="address"> |
|
|
|
<div class="title"> |
|
|
|
<p>{{ alarm.address }}</p> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
<span>{{ alarm.time }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="action"> |
|
|
|
<van-button |
|
|
|
v-for="(item, index) in buttonList" |
|
|
|
:key="index" |
|
|
|
:type="item.type" |
|
|
|
:icon="item.icon" |
|
|
|
@click="onClick(item.name)" |
|
|
|
>{{ item.text }}</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 外部地图app选择弹窗 --> |
|
|
|
<van-action-sheet |
|
|
|
class="actionSheet" |
|
|
|
v-model="actionSheetShow" |
|
|
|
title="即将打开以下外部APP进行导航" |
|
|
|
:actions="mapAppList" |
|
|
|
:closeable="false" |
|
|
|
cancel-text="取消" |
|
|
|
@select="onSelect" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import MapLoader from "@/config/amap.js"; |
|
|
|
export default { |
|
|
|
name: 'alarm-details', |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
title: '进入涉水区域警报', |
|
|
|
alarm: { |
|
|
|
message: '您的孩子，进入涉水区域', |
|
|
|
address: '桂城街道深海路25号平洲桂城广东天波教育科技有限公司', |
|
|
|
time: '2023-03-14 14:16:55', |
|
|
|
glng: '113.175203274874', |
|
|
|
glat: '23.0261293630648' |
|
|
|
}, |
|
|
|
currentAddress: { |
|
|
|
address: '', |
|
|
|
lng: '', |
|
|
|
lat: '' |
|
|
|
}, |
|
|
|
buttonList: [ |
|
|
|
{ name: 'goHere', text: '去这里', type: 'primary', icon: 'guide-o' }, |
|
|
|
{ name: 'errorReport', text: '误报', type: 'primary', icon: 'warn-o' }, |
|
|
|
], |
|
|
|
map: { |
|
|
|
geocoder: null, |
|
|
|
instance: null, |
|
|
|
resizeEnable: true, |
|
|
|
zoom: 18, |
|
|
|
centerMarker: null, |
|
|
|
center: [113.175203274874, 23.0261293630648], |
|
|
|
}, |
|
|
|
markers: null, |
|
|
|
actionSheetShow: false, |
|
|
|
mapAppList: [ |
|
|
|
{ name: "高德地图", wakeUpUrl: "https://uri.amap.com/marker?", number: 0 }, |
|
|
|
{ name: "腾讯地图", wakeUpUrl: "https://apis.map.qq.com/tools/poimarker?", number: 1 } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.initAmap() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onNavBack() {}, |
|
|
|
// 初始化地图 |
|
|
|
initAmap() { |
|
|
|
MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation' ]).then( |
|
|
|
AMap => { |
|
|
|
this.map.instance = new AMap.Map("details_map", { |
|
|
|
center: this.map.center, |
|
|
|
resizeEnable: this.map.resizeEnable, |
|
|
|
zoom: this.map.zoom, |
|
|
|
zoomEnable: true |
|
|
|
}); |
|
|
|
this.map.geocoder = new AMap.Geocoder({ |
|
|
|
extensions: "all" |
|
|
|
}); |
|
|
|
this.initCenterMarker(); |
|
|
|
}, |
|
|
|
err => { |
|
|
|
this.$toast.clear(); |
|
|
|
console.log("加载地图失败:::", err); |
|
|
|
} |
|
|
|
); |
|
|
|
}, |
|
|
|
// 初始化marker |
|
|
|
initCenterMarker() { |
|
|
|
const content = '<div class="centerMarker"><i class="cir"></i></div>'; |
|
|
|
let position = this.map.instance.getCenter(); |
|
|
|
console.log("position", position); |
|
|
|
position = [ position.lng, position.lat ]; |
|
|
|
if(this.map.centerMarker) { |
|
|
|
// 如果 存在marker，则清掉前一个marker，防止出现多个marker的情况 |
|
|
|
this.map.instance.remove(this.map.centerMarker); |
|
|
|
} |
|
|
|
// 创建一个 Icon |
|
|
|
let markerIcon = new AMap.Icon({ |
|
|
|
size: new AMap.Size(25, 34), |
|
|
|
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', |
|
|
|
imageSize: new AMap.Size(135, 40), |
|
|
|
imageOffset: new AMap.Pixel(-95, -3) |
|
|
|
}); |
|
|
|
this.map.centerMarker = new AMap.Marker({ |
|
|
|
position: position, |
|
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', |
|
|
|
offset: new AMap.Pixel(-13, -30) |
|
|
|
}); |
|
|
|
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; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 调用高德定位api获取当前位置 |
|
|
|
createGeolocation() { |
|
|
|
this.map.geolocation = new AMap.Geolocation({ |
|
|
|
nableHighAccuracy: true, //是否使用高精度定位，默认:true |
|
|
|
timeout: 10000, //超过10秒后停止定位，默认：5s |
|
|
|
zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点 |
|
|
|
buttonPosition:'LT', //定位按钮的停靠位置 |
|
|
|
showButton: process.env.NODE_ENV !== 'production', |
|
|
|
buttonOffset: new AMap.Pixel(20, 400), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) |
|
|
|
showMarker: false, // 定位成功后是否显示marker |
|
|
|
showCircle: false, // 定位成功并且有精度信息时，是否用一个圆圈circle表示精度范围，默认值：true |
|
|
|
}); |
|
|
|
this.map.instance.addControl(this.map.geolocation); |
|
|
|
const _this = this; |
|
|
|
const localeLoading = this.$toast.loading('获取定位中...'); |
|
|
|
this.map.geolocation.getCurrentPosition(function (status, result) { |
|
|
|
try { |
|
|
|
if(status == 'complete') { |
|
|
|
console.log('定位完成:::', result); |
|
|
|
const position = [ result.position.lng, result.position.lat ]; |
|
|
|
_this.geocoder(position); |
|
|
|
} else { |
|
|
|
console.error('用户未授权定位:::'); |
|
|
|
console.error('status:::', status); |
|
|
|
console.error('result:::', result); |
|
|
|
_this.$notify({ |
|
|
|
type: 'warning', |
|
|
|
message: '您未打开定位服务，前往设置可打开' |
|
|
|
}); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.log(e); |
|
|
|
} finally { |
|
|
|
localeLoading.clear(); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
onClick(name) { |
|
|
|
if(name === 'goHere') { |
|
|
|
// 根据选择的地图跳转不同地图app的url |
|
|
|
this.actionSheetShow = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
onSelect(item) { |
|
|
|
if(item.number === 0) { |
|
|
|
// 高德 |
|
|
|
this.wakeUpGaodeMap(item.wakeUpUrl); |
|
|
|
} else if (item.number === 1) { |
|
|
|
this.wakeUpTencentMap(item.wakeUpUrl); |
|
|
|
} |
|
|
|
}, |
|
|
|
wakeUpGaodeMap(wakeUpUrl) { |
|
|
|
const position = this.alarm.glng + ',' +this.alarm.glat; |
|
|
|
const name = this.alarm.address; |
|
|
|
window.location.href = `${wakeUpUrl}position=${position}&name=${name}&callnative=1`; |
|
|
|
}, |
|
|
|
wakeUpTencentMap(wakeUpUrl) { |
|
|
|
const position = this.alarm.glat + ',' + this.alarm.glng ; |
|
|
|
const address = this.alarm.address; |
|
|
|
const key = 'UHFBZ-I5ECQ-GSA5B-GW3UW-V2NL5-A3FNY'; |
|
|
|
const myAppName = 'ssjlqqmap'; |
|
|
|
window.location.href = `${wakeUpUrl}type=0&marker=coord:${position};title:${address};addr:${address}&key=${key}&referer=${myAppName}`; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
.alarm-container { |
|
|
|
.details_map { |
|
|
|
$width: 50PX; |
|
|
|
$cirWidth: 15PX; |
|
|
|
.centerMarker { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.centerMarker i.cir { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: $width; |
|
|
|
height: $width; |
|
|
|
background: rgba(255, 178, 128, 0.4); |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
.centerMarker i.cir:after { |
|
|
|
content: " "; |
|
|
|
width: $cirWidth; |
|
|
|
height: $cirWidth; |
|
|
|
background: #ff9625; |
|
|
|
border: 2PX solid #fff; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.alarm-container { |
|
|
|
position: relative; |
|
|
|
height: 100vh; |
|
|
|
width: 100%; |
|
|
|
.van-nav-bar { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.notice { |
|
|
|
position: absolute; |
|
|
|
top: 40px; |
|
|
|
height: 40px; |
|
|
|
width: 100%; |
|
|
|
background-color: #ee0a24; |
|
|
|
color: #fff; |
|
|
|
font-size: 14px; |
|
|
|
@include center(); |
|
|
|
} |
|
|
|
.refresh { |
|
|
|
position: absolute; |
|
|
|
top: 100px; |
|
|
|
right: 20px; |
|
|
|
height: 50px; |
|
|
|
width: 50px; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 0 5px 1px rgba(185, 185, 185, 0.4); |
|
|
|
border-radius: 5px; |
|
|
|
@include center(); |
|
|
|
flex-direction: column; |
|
|
|
span { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.bottom { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
background-color: $background; |
|
|
|
z-index: 999; |
|
|
|
.address { |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
flex-direction: column; |
|
|
|
font-size: 14px; |
|
|
|
margin: 10px 10px 0 10px; |
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
text-align: left; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.time { |
|
|
|
width: 100%; |
|
|
|
background-color: #fff; |
|
|
|
padding: 5px 0; |
|
|
|
margin: 5px 0; |
|
|
|
font-weight: 400; |
|
|
|
text-align: left; |
|
|
|
border-radius: 5px; |
|
|
|
span { |
|
|
|
margin-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.action { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
padding-bottom: 15px; |
|
|
|
.van-button { |
|
|
|
width: 120px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
