百度地图如何把marker点定位到任何位置?

 

 

 需求如图:保证每次点击设备都能让点移动到中间偏下的位置,从而达到信息窗口可以完美显示。

开发环境 vue^2.6.11 + vue-baidu-map 我们直接在地图初始化的时候保存了地图对象 this.map, this.BMap

相信大家都知道百度提供一个平移到某个经纬度的方法


 const point = new this.BMap.Point(lng, lat)
this.map.panTo(point)

这个方法只是将某个坐标平移到中心点(也可以叫切换中心点),此方法并不能直接平移到自己想要的位置

不难想到,只要在这个平移到这个经纬度之前减去对应的经纬度就能让点平移到任意位置了例如:

//向下平移0.005经纬度
const lat
= Number(list.latitude) + 0.005 const point = new this.BMap.Point(lng, lat) this.map.panTo(point)

这种方法虽然难调整,但是看上去似乎可行。松了一口气,滚了一下滚轮,当地图缩放改变,你再去点的时候位置又偏移了。

通过多次实验不难发现规律,当地图缩放每增加一,你所调整的(经纬度)就减少一半,于是我灵机一动就出现下面的代码:

infoWindowOpen(list) {
  //此时我已经无法解释560是什么东西了。。。
    const lat = Number(list.latitude) + 560 / Math.pow(2, this.zoom + 1)
    const point = new this.BMap.Point(list.longitude, lat)
    this.map.panTo(point)
 }

这个时候我已经无法解释560是什么东西了,往下的距离,这里之所以在zoom + 1只是想尽量勉强解释一下这560是在1080*1920下点到窗口顶部560px,有兴趣的可以研究一下,欢迎留言指教。

posted @ 2021-03-22 08:43  Y.zoro  阅读(285)  评论(0编辑  收藏  举报