vue 集成高德地图，点击图标，弹出van

弹出van"/>

vue 集成高德地图，点击图标，弹出van

代码

 <van-action-sheet v-model="sheetShow" title=""><div class="van-list-vol"><van-col span="3"><div><van-imagestyle="height: 40px; width: 40px"round:src="hospitalUrl? hospitalUrl: 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>{{ hospitalName }}</span></h3></div><div><label class="radius-blue" v-if="hospitalLevel">{{ lev[hospitalLevel]}}{{ hospitalGrade ? orgGrade[hospitalGrade] : "" }}</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><divstyle="font-size: 15px; margin-left: 5px; margin-right: 5px"></div><div class="item-left">{{ hospital.detailAddress || hospitalAddress }}</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><imgsrc="@/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: "", //设置您的keyversion: "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 (itemType) {if (itemType.indexOf("CHSC") > -1) {imageUrl = require("@/assets/images/icon/web_sq.png");}if (itemType.indexOf("healthCenter") > -1) {imageUrl = require("@/assets/images/icon/web_ws.png");}if (itemType.indexOf("clinic") > -1) {imageUrl = require("@/assets/images/icon/web_mz.png");}if (itemType.indexOf("MCH") > -1) {imageUrl = require("@/assets/images/icon/web_fb.png");}if (itemType.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-labelmarker.setLabel({direction: "top",offset: new AMap.Pixel(0, 0), //设置文本标注偏移量content:"<div style='font-weight:bold;fontSize: 14'>" +itemName +"</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); //取前十个markerfirstFewMarker.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，没有效果，就先加个延时吧