Code
<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 from you |
</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">Telephone</p>
</div>
<div v-else>
<img
src="@/assets/images/icon/map_nophone.png"
width="20"
/>
<p style="margin-top: 2px; color: #a8a9af">Telephone</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">Navigation</p>
</div>
</div>
</van-col>
<van-col span="14">
<van-button round block type="primary" @click="gotoHos(hospital)"
>Go to make an appointment</van-button
>
</van-col>
</van-row>
</div>
</div>
</van-action-sheet>
hospitalMap() {
let that = this;
let markers = [];
AMapLoader.load({
key: "", //Set your 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, // Whether to support easing effect
zooms: [2, 22],
});
if (that.mapInit) {
window.map.setCenter(center);
window.map.setZoom(zo);
}
window.map.clearMap();
// Construct a vector circle
var circle = new AMap.Circle({
center: new AMap.LngLat(that.locationLon, that.locationLat), // Circle center position
radius: 1000, //radius
strokeColor: "rgba(0,0,255,1)", //Line color
strokeOpacity: 0.5, //Line transparency
strokeWeight: 0.5, //line thickness
fillColor: "rgba(0,0,255,1)", //fill color
fillOpacity: 0.2, //Fill transparency
});
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("map 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 & amp; & amp; item.longitude) {
let positionV = [item.longitude, item.latitude];
marker = new AMap.Marker({
map: map,
position: positionV,
icon: imageUrl,
offset: new AMap.Pixel(-18, -40),
});
//The label is displayed in the upper left corner of the blue box with a white background by default, and the style className is: amap-marker-label
marker.setLabel({
direction: "top",
offset: new AMap.Pixel(0, 0), //Set text label offset
content:
"<div style='font-weight:bold;fontSize: 14'>" +
item.orgName +
"</div>", //Set text annotation content
});
}
var onMarkerClick = function (e) {
console.log("marker click");
that.hospital = item;
that.sheetShow = true;
};
marker.on("click", onMarkerClick); //Bind click event
markers.push(marker);
}
window.map.add(markers);
setTimeout(() => {
if (markers.length > 3) {
let firstFewMarker = markers.slice(0, 3); //Take the first ten markers
firstFewMarker.push(locationMarker);
window.map.setFitView(firstFewMarker, true, [50, 60, 50, 60]);
}
}, 800);
})
.catch((e) => {
console.log(e);
});
},
Phenomena
Click the icon on the map, then sheetShow is true, and the pop-up box flashes by
Explore
Click the map icon, and then set sheetShow to true to pop up van-action-sheet. The logic is correct. If I put this code in the control outside the map, the dialog box can pop up correctly, and then in browser mode It can pop up normally, but when switched to mobile mode, it can’t pop up again.
If it is a van-action-sheet problem, it can pop up outside the map, so it should be eliminated. If it is a problem with the map icon click code, it can pop up again in browser mode, so there is no compatibility issue. Difficult to check
Later, I communicated with the company’s front-end boss and found the problem. When the map icon is clicked, the map will be refreshed. The van-action-sheet just pops up. When the map is refreshed, the van-action-sheet disappears, so it appears in a flash. Yes, this is easy to solve. In the click event, add a delay. After the refresh is completed, a dialog box will pop up.
var onMarkerClick = function (e) {
console.log("marker click");
that.hospital = item;
setTimeout(() => {
that.sheetShow = true;
}, 100);
};
I tried this.$nextTick here, but it didn’t work. Let’s add a delay first.