代码
html
<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>
html
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就消失了，所以才出现一闪而过，这样就好解决了，在点击事件里边，加一个延时，刷新完了，在弹出对话框
html
var onMarkerClick = function (e) {
console.log("marker 点击");
that.hospital = item;
setTimeout(() => {
that.sheetShow = true;
}, 100);
};我这边试了一下this.$nextTick，没有效果，就先加个延时吧