<template>
<div class="app-container">
<div style="background-color: #ffffff;">
<div id="container"></div>
</div>
<div ref="dialog" style="position: fixed;">
<div class="dialog">
<div class="dialog-title"><span>Pressure Gauge</span> <img @click="closeInfoWindow" src="../assets/images/Delete (17).png"
alt="" srcset="">
</div>
<div class="dialog-item"><span>Monitoring situation</span> <span>Pressure is normal</span></div>
<div class="dialog-item"><span>Monitoring situation</span> <span>Pressure is normal</span></div>
<div class="dialog-item"><span>Monitoring situation</span> <span>Pressure is normal</span></div>
<div class="dialog-item"><span>Monitoring situation</span> <span>Pressure is normal</span></div>
<div class="detail">View details</div>
</div>
<div class="dialog1">
<div class="dialog-title">Historical Alarms</div>
<div class="dialog-item"><span>March 3, 2023 13:00-13:40 </span> <span> Pipeline pressure 90KPa</span></div>
<div class="dialog-item"><span>March 3, 2023 13:00-13:40 </span> <span> Pipeline pressure 90KPa</span></div>
<div class="dialog-item"><span>March 3, 2023 13:00-13:40 </span> <span> Pipeline pressure 90KPa</span></div>
<div class="dialog-item"><span>March 3, 2023 13:00-13:40 </span> <span> Pipeline pressure 90KPa</span></div>
<div class="dialog-item"><span>March 3, 2023 13:00-13:40 </span> <span> Pipeline pressure 90KPa</span></div>
</div>
</div>
</div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
/*When used in Vue3, you need to introduce the shallowRef method in Vue3 (use shallowRef for non-depth monitoring,
Because the Proxy interception operation used in Vue3 will change the JSAPI native object, it is necessary to distinguish the method of using Vue2 to perform non-depth monitoring of the map object.
Otherwise, problems will occur. It is recommended that JSAPI related objects be stored using non-responsive ordinary objects)*/
import {<!-- --> shallowRef } from '@vue/reactivity';
import {<!-- --> ref, reactive, getCurrentInstance } from "vue";
const {<!-- --> proxy } = getCurrentInstance();
const allMap = shallowRef(null);
const allInfoWindow = shallowRef(null);
function initMap() {<!-- -->
window._AMapSecurityConfig = {<!-- -->
securityJsCode: '',
}
AMapLoader.load({<!-- -->
key: "", // The applied web developer Key, required when calling load for the first time
version: "2.0", // Specify the version of JSAPI to be loaded, the default is 1.4.15
plugins: ["AMap.GeoJSON"], // List of plugins to be used, such as scale'AMap.Scale', etc.
}).then((AMap) => {<!-- -->
const map = new AMap.Map("container", {<!-- --> //Set the map container id
viewMode: "2D", //Whether it is 3D map mode
zoom: 10, //Initialize map level
center: [119.898881, 30.594178], //Initialize the map center point position
mapStyle: 'amap://styles/',
});
allMap.value = map
const markerdata = reactive([[119.898881, 30.794178], [119.998881, 30.794178], [119.798881, 30.794178], [119.698881, 30.794178], [120.098881, 30.794 178]])
markerdata.forEach(element => {<!-- -->
//Create AMap.Icon instance:
const icon = new AMap.Icon({<!-- -->
size: new AMap.Size(50, 60), // Icon size
image: new URL('../assets/images/Pressure Gauge.png', import.meta.url).href, //Icon image
// imageOffset: new AMap.Pixel(0, -60), // The offset of the image relative to the display area, suitable for sprite images, etc.
imageSize: new AMap.Size(50, 60), // Stretch or compress the image according to the set size
imageOffset: new AMap.Pixel(0, 0)
});
//Create a Marker instance:
const marker = new AMap.Marker({<!-- -->
position: new AMap.LngLat(element[0], element[1]), // latitude and longitude object, or a one-dimensional array of latitude and longitude [116.39, 39.9]
// title: 'hhhhhh',
icon: icon
});
marker.content = proxy.$refs.dialog
// Add the created point markers to the existing map instance:
map.add(marker);
//Information window instance
const infoWindow = new AMap.InfoWindow({<!-- -->
anchor: "top-left",
//
offset: new AMap.Pixel(50, 30),
//Hide the native pop-up window border and close button
isCustom: true,
autoMove: true,
avoid: [20, 20, 20, 20],
// Click the map to close
closeWhenClickMap: true,
});
allInfoWindow.value = infoWindow
const markerClick = (e) => {<!-- -->
console.log(e, 'e');
// Marked click event
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
marker.on('click', markerClick);
});
}).catch(e => {<!-- -->
console.log(e);
})
}
initMap()
const closeInfoWindow = () => {<!-- -->
console.log(allInfoWindow, 'allInfoWindow');
// Close the information form
allMap.value.clearInfoWindow()
}
const seeDetail = () => {<!-- -->
console.log(1, 'see');
}
</script>
<style lang="scss" scoped>
.app-container {<!-- -->
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#container {<!-- -->
padding: 0px;
margin: 0px;
width: 1920px;
height: 1080px;
}
.dialog {<!-- -->
width: 230px;
height: 200px;
background-image: url('../assets/images/pop-up1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10px;
color: #fff;
display: flex;
flex-direction: column;
.dialog-title {<!-- -->
font-size: 18px;
font-family: Optimize the title black;
font-weight: 400;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
img {<!-- -->
width: 10px;
height: 10px;
}
}
.dialog-item {<!-- -->
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 5px 0;
}
.detail {<!-- -->
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #2FD7D7;
line-height: 60px;
text-align: center;
cursor: pointer;
}
}
.dialog1 {<!-- -->
width: 320px;
height: 200px;
background-image: url('../assets/images/pop-up2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10px;
color: #fff;
display: flex;
flex-direction: column;
margin-top: 30px;
.dialog-title {<!-- -->
font-size: 18px;
font-family: Optimize the title black;
font-weight: 400;
text-align: left;
}
.dialog-item {<!-- -->
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 7px 0;
}
}
</style>
