vue 集成高德地图,点击图标,弹出van-action-sheet,一闪而过的问题探究

代码

 <van-action-sheet v-model="sheetShow" title="">
      <div class="van-list-vol">
        <van-col span="3">
          <div>
            <van-image
              style="height: 40px; width: 40px"
              round
              :src="
                hospital.orgUrl
                  ? hospital.orgUrl
                  : require('@/assets/images/icon/search_hospital.png')
              "
            />
          </div>
        </van-col>
        <van-col span="21" style="margin-bottom: 10px">
          <div style="display: flex; margin-bottom: 10px">
            <h3 style="margin: 0; padding: 0; flex-grow: 2">
              <span>{{ hospital.orgName }}</span>
            </h3>
          </div>

          <div>
            <label class="radius-blue" v-if="hospital.orgLevel">
              {{ lev[hospital.orgLevel]
              }}{{ hospital.orgGrade ? orgGrade[hospital.orgGrade] : "" }}
            </label>
          </div>

          <div style="margin: 5px 0; display: flex">
            <label style="font-size: 15px"></label>
            <div class="item-right" v-if="hospital.distance">
              距您{{ hospital.distance }}km |
            </div>
            <div
              style="font-size: 15px; margin-left: 5px; margin-right: 5px"
            ></div>
            <div class="item-left">
              {{ hospital.detailAddress || hospital.orgAddress }}
            </div>
          </div>
        </van-col>
        <div>
          <van-row style="margin-left: 20px; margin-top: 10px">
            <van-col span="5">
              <div @click="callTel(hospital)">
                <div class="text-center">
                  <div v-if="hospital.contactPhone">
                    <img src="@/assets/images/icon/map_phone.png" width="20" />
                    <p style="margin-top: 2px">电话</p>
                  </div>
                  <div v-else>
                    <img
                      src="@/assets/images/icon/map_nophone.png"
                      width="20"
                    />
                    <p style="margin-top: 2px; color: #a8a9af">电话</p>
                  </div>
                </div>
              </div>
            </van-col>
            <van-col span="5">
              <div @click="navigation(hospital)">
                <div class="text-center">
                  <img src="@/assets/images/icon/map_navi.png" width="20" />
                  <p style="margin-top: 2px">导航</p>
                </div>
              </div>
            </van-col>
            <van-col span="14">
              <van-button round block type="primary" @click="gotoHos(hospital)"
                >去预约</van-button
              >
            </van-col>
          </van-row>
        </div>
      </div>
    </van-action-sheet>
 hospitalMap() {
      let that = this;
      let markers = [];
      AMapLoader.load({
        key: "", //设置您的key
        version: "2.0",

        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          let center = [that.locationLon, that.locationLat];
          let zo = 10;
          if (window.map != null) {
            center = window.map.getCenter();
            zo = window.map.getZoom(2);
          }
          window.map = new AMap.Map("container", {
            viewMode: "3D",
            animateEnable: false, // 是否支持缓动效果
            zooms: [2, 22],
          });
          if (that.mapInit) {
            window.map.setCenter(center);
            window.map.setZoom(zo);
          }
          window.map.clearMap();
          // 构造矢量圆形
          var circle = new AMap.Circle({
            center: new AMap.LngLat(that.locationLon, that.locationLat), // 圆心位置
            radius: 1000, //半径
            strokeColor: "rgba(0,0,255,1)", //线颜色
            strokeOpacity: 0.5, //线透明度
            strokeWeight: 0.5, //线粗细度
            fillColor: "rgba(0,0,255,1)", //填充颜色
            fillOpacity: 0.2, //填充透明度
          });
          window.map.add(circle);

          var locationMarker = new AMap.Marker({
            map: map,
            position: [that.locationLon, that.locationLat],
            icon: require("@/assets/images/icon/web_location.png"),
            offset: new AMap.Pixel(-18, -40),
          });
      
          window.map.add(locationMarker);

          for (var i = 0; i < that.mapList.length; i++) {
            var marker;
            let item = that.mapList[i];
            // console.log("地图marker", item);

            let imageUrl = require("@/assets/images/icon/web_yy.png");
            if (item.orgType) {
              if (item.orgType.indexOf("CHSC") > -1) {
                imageUrl = require("@/assets/images/icon/web_sq.png");
              }
              if (item.orgType.indexOf("healthCenter") > -1) {
                imageUrl = require("@/assets/images/icon/web_ws.png");
              }
              if (item.orgType.indexOf("clinic") > -1) {
                imageUrl = require("@/assets/images/icon/web_mz.png");
              }
              if (item.orgType.indexOf("MCH") > -1) {
                imageUrl = require("@/assets/images/icon/web_fb.png");
              }
              if (item.orgType.indexOf("other") > -1) {
                imageUrl = require("@/assets/images/icon/web_qt.png");
              }
            }

            if (item.latitude && item.longitude) {
            
              let positionV = [item.longitude, item.latitude];
              marker = new AMap.Marker({
                map: map,
                position: positionV,
                icon: imageUrl,
                offset: new AMap.Pixel(-18, -40),
              });

              // label默认蓝框白底左上角显示,样式className为:amap-marker-label
              marker.setLabel({
                direction: "top",
                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                content:
                  "<div style='font-weight:bold;fontSize: 14'>" +
                  item.orgName +
                  "</div>", //设置文本标注内容
              });
            }
            var onMarkerClick = function (e) {
              console.log("marker 点击");
              that.hospital = item;
   			  that.sheetShow = true;
            };
            marker.on("click", onMarkerClick); //绑定click事件

            markers.push(marker);
          }

          window.map.add(markers);
          setTimeout(() => {
            if (markers.length > 3) {
              let firstFewMarker = markers.slice(0, 3); //取前十个marker
              firstFewMarker.push(locationMarker);
              window.map.setFitView(firstFewMarker, true, [50, 60, 50, 60]);
            }
          }, 800);
        })
        .catch((e) => {
          console.log(e);
        });
    },

现象

点击地图上的图标,然后sheetShow 为true,弹框一闪而过

探究

地图图标点击,然后呢,设置sheetShow 为true,弹出van-action-sheet,逻辑上是没错的,我把这个代码放在地图外的控件,是可以正确弹出对话框的,然后在浏览器模式下,是正常能弹出的,切换成手机模式,又不能弹出
在这里插入图片描述
如果是van-action-sheet问题,在地图外的地方能弹出,就应该能排除,如果是地图图标点击代码的问题,在浏览器模式下又能弹出,也就不存在兼容性的问题了,很难排查
后来和公司前端大佬交流,找到了问题,地图图标点击的时候,会刷新地图,van-action-sheet刚弹出来,地图刷新了,van-action-sheet就消失了,所以才出现一闪而过,这样就好解决了,在点击事件里边,加一个延时,刷新完了,在弹出对话框

 var onMarkerClick = function (e) {
              console.log("marker 点击");
              that.hospital = item;
              setTimeout(() => {
                that.sheetShow = true;
              }, 100);
             
            };

我这边试了一下this.$nextTick,没有效果,就先加个延时吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/118904.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用友U8定制版在集简云:无需API即可集成客服系统和用户运营

无代码开发的新时代 在这个信息化、自动化的时代&#xff0c;无代码开发已经成为一种新的趋势。集简云就是这样的一款工具&#xff0c;可以轻松连接用友U8 定制版与近千款软件系统&#xff0c;无需开发、无需代码知识就可以打通各种软件之间的数据连接&#xff0c;构建自动化与…

从零开始搭建微服务(一)

构建项目父工程 添加公共核心模块 安装nacos 安装nacos nacos 文档地址&#xff1a; https://nacos.io/zh-cn/docs/what-is-nacos.html 本文使用版本2.2.2 下载地址&#xff1a;https://github.com/alibaba/nacos/archive/refs/tags/2.2.2.zip 使用nacos 我们下载是源代码 解…

MySQL -- 索引

MySQL – 索引 文章目录 MySQL -- 索引一、索引简介1.简介2.索引效率的案例 二、认识磁盘1.磁盘2.结论3.磁盘随机访问(Random Access)与连续访问(Sequential Access) 三、MySQL 与磁盘交互基本单位1.基本单位2.MySQL中的数据管理 五、索引的理解1.索引案例2.单页mysql page3.管…

[科研图像处理]用matlab平替image-j,有点麻烦,但很灵活!

做材料与生物相关方向的同学应该对image-j并不陌生&#xff0c;前几天有个师兄拜托我用image-j分析一些图片&#xff0c;但使用过后发现我由于不了解image-j的工作流程而对结果并不确信&#xff0c;而且image-j的功能无法拓展&#xff0c;对有些图片的处理效果并不好&#xff0…

hivesql,sql 函数总结:

1、NVL函数与Coalesce差异 -- select nvl(null,8); -- 结果是 8 -- select nvl(,7); -- 结果是"" -- select coalesce(null,null,9); -- 结果是 9 -- select coalesce("",null,9); -- 结果是 "" 1.2、 NVL函数与Coalesce差异 …

centos获取服务器公网ip

查看公网IP 用下面几个命令&#xff1a; #curl ifconfig.me #curl icanhazip.com #curl cip.cc

TikTok与老年用户:社交媒体的跨代交流

在数字时代&#xff0c;社交媒体已成为人们沟通、分享和互动的主要平台。然而&#xff0c;社交媒体不再仅仅局限于年轻一代&#xff0c;老年用户也逐渐加入其中。 其中&#xff0c;TikTok是一个引领潮流的短视频社交媒体应用&#xff0c;正在吸引越来越多的老年用户。本文将探…

不学51直接学stm32可以吗?学stm32需要哪些基础?

不学51直接学stm32可以吗&#xff1f;学stm32需要哪些基础&#xff1f; 不管那些大佬技术多么牛逼&#xff0c;大多数入门都是从51单片机开始。 最近有一些入门的小伙伴问我说看到同学都从直接从STM32开始干了。最近很多小伙伴找我&#xff0c;说想要一些stm32的资料&#xff…

【Mac开发环境搭建】JDK安装、多JDK安装与切换

文章目录 JDK下载与安装下载安装 配置环境变量安装多个JDK共存 JDK下载与安装 下载 Oracle官网提供了非常多个版本的JDK供下载&#xff0c;可以点击如下链接重定向到JDK下载页面 ORACLE官网JDK下载 安装 下面的官方文档可以点开收藏到浏览器的收藏夹&#xff0c;这样后续在开…

计算机网络第4章-IPv6和寻址

IP地址的分配 为了获取一块IP地址用于一个组织的子网内&#xff0c;于是我们向ISP联系&#xff0c;ISP则会从已分给我们的更大 地址块中提供一些地址。 例如&#xff0c;ISP也许已经分配了地址块200.23.16.0/20。 该ISP可以依次将该地址块分成8个长度相等的连续地址块&…

动态IP和静态IP哪个安全,该怎么选择

随着互联网的普及&#xff0c;越来越多的人开始关注网络安全问题。其中&#xff0c;IP地址作为网络通信中的重要组成部分&#xff0c;也成为了人们关注的焦点。 在IP地址中&#xff0c;动态IP和静态IP是两种不同的分配方式&#xff0c;它们各自具有不同的特点&#xff0c;那么…

路由器基础(十二):IPSEC VPN配置

一、IPSec VPN基本知识 完整的IPSec协议由加密、摘要、对称密钥交换、安全协议四个部分组成。 两台路由器要建立IPSecVPN连接&#xff0c;就需要保证各自采用加密、摘要、对称密钥 交换、安全协议的参数一致。但是IPSec协议并没有确保这些参数一致的手段。 同时&#xff0c;IP…

Scala 泛型编程

1. 泛型 Scala 支持类型参数化&#xff0c;使得我们能够编写泛型程序。 1.1 泛型类 Java 中使用 <> 符号来包含定义的类型参数&#xff0c;Scala 则使用 []。 class Pair[T, S](val first: T, val second: S) {override def toString: String first ":" sec…

数组的存储结构、特殊矩阵和稀疏矩阵的压缩存储

数组的存储结构、特殊矩阵和稀疏矩阵的压缩存储 1.数组的存储结构、特殊矩阵、稀疏矩阵的压缩存储1.1 数组的存储结构1.1.1 一维数组的存储结构关系式1.1.2 多维数组的存储结构关系式 1.2 特殊矩阵的压缩存储1.2.1 对称矩阵1.2.2 下三角矩阵1.2.3 上三角矩阵1.2.4 三对角矩阵 1…

Nignx及负载均衡动静分离

目录 一.Nginx负载均衡 1.1.下载 1.2.安装 1.3.负载均衡 二.前端部署 2.1. 准备工作 2.2.部署 好啦今天就到这里了哦&#xff01;&#xff01;&#xff01;希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.Nginx负载均衡 1.1.下载 输入命令 : cd javaCloudJun/…

玻色量子“揭秘”之最大割(Max-Cut)问题与QUBO建模

Max-Cut问题简单地说&#xff0c;就是求一种分割方法。给定一张无向图, 将所有顶点分割成两群, 同时使得被切断的边数量最大&#xff0c;或边的权重最大。 QUBO&#xff08;Quadratic Unconstrained Binary Optimization&#xff09;问题即二次无约束二值优化问题&#xff0c;…

Mysql学习文档笔记

文章目录 基础篇通用语法及分类DDL&#xff08;数据定义语言&#xff09;数据库操作注意事项 表操作 DML&#xff08;数据操作语言&#xff09;添加数据注意事项 更新和删除数据 DQL&#xff08;数据查询语言&#xff09;基础查询条件查询聚合查询&#xff08;聚合函数&#xf…

6大场景,玩转ChatGPT!

文章目录 一、故事叙述提问举例 二、产品描述提问举例 三、报告撰写提问举例 四、邮件和信件撰写提问举例 五、新间稿和公告撰写提问举例 六、学术论文和专业文章撰写提问举例 本文是在GPT3.5版本下演示的 我们知道AI技术不仅能够自动生成文章和内容&#xff0c;还可以根据我们…

Linux中的防火墙(粗糙版)

防火墙的配置和策略 安全技术&#xff1a; 入侵检测系统&#xff1a;特点是不阻断网络访问&#xff0c;量化&#xff0c;定位的方式来锁定内外网络的危险情况&#xff0c;提供告警服务和事后监督为主。 说白了就是默默看着你&#xff0c;没有主动行为 入侵防御系统&#xff1…

Flutter 06 动画

一、动画基本原理以及Flutter动画简介 1、动画原理&#xff1a; 在任何系统的Ul框架中&#xff0c;动画实现的原理都是相同的&#xff0c;即&#xff1a;在一段时间内&#xff0c;快速地多次改变Ul外观&#xff1b;由于人眼会产生视觉暂留&#xff0c;所以最终看到的就是一个…