细节调整

hookehuyr
Commit 0ce4aa9a2edfc17105d80ff494250affbeb36f82 0ce4aa9a 1 parent ef2d7403
Showing 5 changed files with 44 additions and 24 deletions
images/定位-小1@2x.png
index.html
src/components/InfoWindow.vue
src/components/InfoWindowWarn.vue
src/views/index.vue
--- a/images/定位-小1@2x.png 0 → 100644
View file @0ce4aa9
+++ b/images/定位-小1@2x.png 0 → 100644
View file @0ce4aa9
--- a/index.html
View file @0ce4aa9
+++ b/index.html
View file @0ce4aa9
+<!--
+ * @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>
--- a/src/components/InfoWindow.vue
View file @0ce4aa9
+++ b/src/components/InfoWindow.vue
View file @0ce4aa9
@@ -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,
+      var current_hour = parseInt(+currentTime / 3600) % 24,
-        current_minute = parseInt(currentTime / 60) % 60,
+        current_minute = parseInt(+currentTime / 60) % 60,
-        current_seconds_long = currentTime % 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_timer = 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) => {
           // 失败
@@ -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;
--- a/src/components/InfoWindowWarn.vue
View file @0ce4aa9
+++ b/src/components/InfoWindowWarn.vue
View file @0ce4aa9
@@ -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) => {
           // 失败
--- a/src/views/index.vue
View file @0ce4aa9
+++ b/src/views/index.vue
View file @0ce4aa9
 <!--
  * @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.587645, 31.314833],
-        [120.586862, 31.314304],
+        [120.587709, 31.314338],
-        [120.587495, 31.314204],
+        [120.588211, 31.314377],
-        [120.587512, 31.313796],
       ];
       // 生成折线地图路径
-      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.route_safe_marker = [marker1, marker2]
-      this.map.add(this.route_marker);
+      this.map.add(this.route_safe_marker);
     },
     removeSafeRoute() { // 移除地图路线
-      this.map.remove([this.current_route]); // 删除地图折线
+      this.map.remove([this.current_safe_route]); // 删除地图折线
-      this.map.remove(this.route_marker); // 删除起始点标记
+      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),