Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0ce4aa9a 1 parent ef2d7403

细节调整

Inline Side-by-side
Showing 5 changed files with 44 additions and 24 deletions
<!--
* @Date: 2023-05-31 16:10:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-10 13:24:19
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
<!DOCTYPE html>
<html lang='zh'>
<head>
......@@ -12,7 +19,7 @@
<script type="module" src="/src/main.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
serviceHost:'https://oa-dev.onwall.cn/_AMapService',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script>
......
......@@ -121,6 +121,7 @@ export default {
play_time: '00:00',
isActive: 0,
nav_scroll: false,
play_timer: null,
}
},
methods: {
......@@ -141,9 +142,9 @@ export default {
return `${minutes}:${second}`;
},
calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
var current_hour = parseInt(+currentTime / 3600) % 24,
current_minute = parseInt(+currentTime / 60) % 60,
current_seconds_long = +currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
......@@ -161,6 +162,8 @@ export default {
this.isActive = 0;
// 滚动状态
this.nav_scroll = false;
// 清空播放计时
this.play_timer = null;
},
showDetail() {
this.show_popup = true;
......@@ -196,8 +199,12 @@ export default {
setTimeout(() => { // 后续操作(同为播放完成)
this.ind = 0
}, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
setInterval(() => {
this.play_time = this.calculateCurrentValue(this.audio.duration - this.audio.currentTime);
this.play_timer = setInterval(() => {
let timer = this.audio.duration - this.audio.currentTime;
if (isNaN(timer)) {
timer = 0
}
this.play_time = this.calculateCurrentValue(timer)
}, 1000);
}).catch((e) => {
// 失败
......@@ -208,6 +215,7 @@ export default {
voice_pause() {
this.audio.pause();
this.is_play = false;
this.changeAudioStatus('pause');
},
goToUrl(url) {
location.href = this.info.details[this.isActive].url;
......
......@@ -214,7 +214,11 @@ export default {
this.ind = 0
}, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
setInterval(() => {
this.play_time = this.calculateCurrentValue(this.audio.duration - this.audio.currentTime)
let timer = this.audio.duration - this.audio.currentTime;
if (isNaN(timer)) {
timer = 0
}
this.play_time = this.calculateCurrentValue(timer)
}, 1000);
}).catch((e) => {
// 失败
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-07 13:25:46
* @LastEditTime: 2023-07-10 13:31:34
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -41,11 +41,11 @@
style="vertical-align: middle;" />
</div> -->
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
style="vertical-align: middle;" />
</div>
<div v-else class="item" @click="handleSafeRoute(false)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.25rem"
style="vertical-align: middle;" />
</div>
</div>
......@@ -189,12 +189,14 @@ export default {
current_lng: '',
current_lat: '',
current_route: '',
current_safe_route: '',
show_popup: false,
dialog_show: false,
dialog_text: '',
walk_route: '',
isActive: 0,
route_marker: [],
route_safe_marker: [],
open_safe_route: true,
show_walk_route: true,
popup_title: '',
......@@ -490,13 +492,12 @@ export default {
addSafeRoute() { // 新增路径
// 行动路线
var path = [
[120.586841, 31.314543],
[120.586862, 31.314304],
[120.587495, 31.314204],
[120.587512, 31.313796],
[120.587645, 31.314833],
[120.587709, 31.314338],
[120.588211, 31.314377],
];
// 生成折线地图路径
this.current_route = new AMap.Polyline({
this.current_safe_route = new AMap.Polyline({
path,
isOutline: true,
outlineColor: '#7F7F7F',
......@@ -512,7 +513,7 @@ export default {
lineCap: 'round',
zIndex: 50
})
this.map.add([this.current_route]);
this.map.add([this.current_safe_route]);
// 设置起始点标记
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
......@@ -530,7 +531,7 @@ export default {
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
content: "<div class='info'>起点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
......@@ -548,15 +549,15 @@ export default {
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
content: "<div class='info'>终点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
this.map.add(this.route_marker);
this.route_safe_marker = [marker1, marker2]
this.map.add(this.route_safe_marker);
},
removeSafeRoute() { // 移除地图路线
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
this.map.remove([this.current_safe_route]); // 删除地图折线
this.map.remove(this.route_safe_marker); // 删除起始点标记
},
addNavRoute (path) { // 新增导航路径
// 生成折线地图路径
......@@ -580,7 +581,7 @@ export default {
// 设置起始点标记
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
......@@ -598,7 +599,7 @@ export default {
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
......