目前用的这个movable-view组件，但是顶层的点位无法像地图那样保持位置不变。想请问一下，如何实现随着放大后，点位依然保持不变的效果（点位如图一箭头标记位置）。

图片demo如下：

<template>
  <view class="tl-p-relative">
    <view class="uni-padding-wrap uni-common-mt">
      <movable-area scale-area>
        <movable-view direction="none" class="tl-bg" @scale="onScale" scale="true"  scale-min="1" scale-max="2" :scale-value="scale">
           <image :src="testImg" mode="widthFix"></image>

        </movable-view>
      </movable-area>
    </view>
    <image class="tl-point" :style="{'top':top + 'rpx','left': left + 'rpx'}" :src="pointImg"></image>
<!--    <image class="tl-point" :style="{'top':top1 + 'px','right': right1+ 'px'}" :src="pointImg"></image>-->
  </view>
</template>


<script>
export default {
  data() {
    return {
      //testImg: 'https://static.zhihu.com/liukanshan/images/comics/bg-89c9bdc3.jpg'
      testImg: 'https://file.genepre.com/test111/11.png',
      //testImg: '../../static/test.png',
      pointImg: 'https://file.genepre.com/test111/point.png',
      top: 400,
      left: 320,
    }
  },
  methods: {
    onScale(e){
      console.log(e.detail)
      let num = parseInt(e.detail.scale);
      console.log('e.detail.scale================',e.detail.scale)
      console.log('num================',num)


      this.top = 400 + e.detail.scale*e.detail.y + 400;
      this.left = 320 -  e.detail.scale*e.detail.x + 320;
      /*this.top =  400 * e.detail.scale;
      this.left = 400 * e.detail.scale;*/
      // if(num == 1){
      //   this.top = 400 * e.detail.scale;
      //   this.left = 320 * e.detail.scale;
      // }else if(num == 2){
      //   this.top = 400 * e.detail.scale;
      //   this.left = 320 * e.detail.scale;
      // }else if(num == 3){
      //   this.top = 400 * e.detail.scale;
      //   this.left = 320 * e.detail.scale;
      // }else {
      //   this.top = 400 * e.detail.scale;
      //   this.left = 320 * e.detail.scale;
      // }

    },
  }
}
</script>

<style>
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:100%;
}
.tl-p-relative{
  width: 750rpx;
  height:750rpx;
  position: relative;
}

movable-area {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

movable-view image{
  width:100%;
}
.tl-bg{
  position: relative;
}
.tl-point{
  position: absolute;
  width: 28rpx;
  height: 28rpx;
}
</style>