js如何制作一个仿百度地图滚轮放大缩小里边设置的marker不变的功能？

Question

项目中有一个页面是一个地图标出所有工场位置的功能，但是地图不让使用第三方库，是后端给一个地图的png图片，
我通过absolute的left和top设置具体的位置，现在想做一个类似百度地图滚轮放大缩小地图查看点击的里边设置的marker，且里边设置的marker位置不变。这么个功能该如何实现？

<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;
}