Vue3-百度地图所在页面滚动后点击位置错位问题解决

需求：
点击按钮唤起地图，页面没滚动的时候，在地图上点击的位置就是鼠标的实际点击位置，但是如果页面发生滚动后，点击就会发生偏移，如图所示：

示意图.png

原因是因为当页面滚动后，百度地图也会跟着发生滚动，虽然地图弹窗是被fix在页面底部的，但地图内部机制还是会跟着页面滚动产生偏移。

解决思路
当点击页面按钮唤起百度地图时，记录下当前页面的向上滚动距离，然后页面的向上滚动距离改为0。
当百度地图弹窗隐藏时，再将页面滚动位置归到原位。

1.获取页面向上滚动的距离
在vue中获取页面的向上的滚动距离，注意如果页面的scroll-behavior设置为了smooth，则使用document.documentElement.scrollTop这个方法就无法正常获取到值，始终是0

//scroll-behavior属性
scroll-behavior:auto; // 滚动条立即滚动
scroll-behavior:smooth; // 窗口平稳滚动

在scroll-behavior:smooth情况下最后经常尝试，使用window.pageYOffset可以获得页面向上滚动的距离
如果没有设置过scroll-behavior，使用document.documentElement.scrollTop也可以获取到页面向上的滚动距离

但是window.pageYOffset这个是只读属性，如果要手动修改页面的滚动位置，则还是需要使用document.documentElement.scrollTop

document.documentElement.scrollTop = 300

定义页面向上滚动距离变量originPositonTop，并监听控制百度地图展示与隐藏的变量baiduPointPicker

let originPositonTop = 0
watch(baiduPointPicker, (newValue, oldValue) => {
  console.log('baiduPointPicker发生了改变')
  // 打开了百度地图
  if (newValue) {
    // 存储点击时的页面滚动位置
    originPositonTop = window.pageYOffset
    // 让页面滚动到最顶部
    document.documentElement.scrollTop = 0
  } else {
    // 页面归位
    document.documentElement.scrollTop = originPositonTop
    // 重置top值
    originPositonTop = 0
  }
})

如果在项目中百度地图弹窗是使用的van-popup，则百度地图的渲染元素应该用v-if去控制渲染

<van-popup v-model:show="baiduPointPicker" position="bottom">
  ...some code
  <div id="map-container" v-if="baiduPointPicker"></div>
</van-popup>