Js how to make a copy of Baidu map wheel zoom in and out of the setting inside the marker unchanged function?

there is a page in the project that shows the location of all workshops on a map, but the map does not allow the use of a third-party library, it is a png image that the back end gives to a map.
I set the specific location through absolute"s left and top. Now I want to do a similar Baidu map scroll wheel to view the marker set inside the click on the map, and the marker location set inside remains unchanged. How should such a function be realized?

<div class="map-wrapper">
      <img src="images/map.png" alt="">
      <ul class="marker-list">
        <li :style="item[0]" @click="getData(key)" v-for="(item, key) in Obj">
          <img src="images/marker-icon.png" alt="">
        </li>
      </ul>
    </div>
    
    js
    data: {
        Obj: {
          "at1": ["left: 80px;top:153px", "11"],
    ...
 css
.map-wrapper{
  position: relative;
}
.marker-list li{
  position: absolute;
}
Apr.06,2022
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b9cb-2afee.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b9cb-2afee.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?