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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

 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);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

现象

点击地图上的图标，然后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);
             
            };
1
2
3
4
5
6
7
8

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