高德地图AMap——setCenter与infoWindow冲突导致不能够正确的设置中心点

原创已于 2023-01-05 20:03:12 修改 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-01-05 19:24:49 首次发布

文章讨论了在高德地图中，当点击marker并打开infoWindow时，由于infoWindow的autoMove属性导致地图中心点偏移的issue。问题原因是infoWindow的自动调整功能与setCenter操作冲突。提出了两种解决方案：一是禁用infoWindow的autoMove属性，二是使用setTimeout延迟设置中心点。对于setZoomAndCenter方法，不推荐使用setTimeout，因为在地图缩放小时仍可能出现偏移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：当点击高德地图上的marker时，要求地图将该marker设置为中心点。

问题：点击marker后加载infoWindow，如果marker在地图比较边缘的位置，设置中心点会出现偏移。如下面示意图（从左往右看）：

问题原因：infoWindow默认属性autoMove为true，当infoWindow内容不在视图范围之内时，会自动调整地图视图直到内容区域显示在地图上，因此与setCenter操作冲突。

解决办法：

第一种：设置infoWindow的autoMove属性为false。参考地址：参考原因及解决办法地址

第二种：设置setTimeout延迟执行setCenter。实际上是从侧面解决的。示意代码如下：

// 示意代码，设置50ms动画还比较流畅
// 设置地图级别和显示中心 与infoWindow的autoMove属性冲突，因此使用setTimeout延迟调用
setTimeout(() => {
    this.map.setCenter([e.lnglat.lng, e.lnglat.lat])
}, 50)

另外：高德地图设置缩放和中心点（setZoomAndCenter）出现的问题同理，但当地图过于缩放太小时，setZoomAndCenter两种方法亲测都不好用，点击放大时仍然可能会出现偏移量！放弃setZoomAndCenter吧！我又想保留infoWindow的autoMove属性，因此”曲线救国“了一下，当缩放比例太大后就只做中心点平移不缩放，有更好的解决方式麻烦踢我一下谢谢，示意代码如下：

//鼠标点击marker弹出自定义的信息窗体
marker.on('click', (e) => {
    let zoom = this.map.getZoom();
    if (zoom < 9) {
        // 设置地图级别和显示中心 与infoWindow的autoMove属性冲突，因此使用setTimeout延迟调用
        setTimeout(() => {
            this.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
        50)
    } else if (zoom < 13) {
        setTimeout(() => {
            this.map.setZoomAndCenter(13.1, [e.lnglat.lng, e.lnglat.lat]);
        }, 500)
    }

    // 打开窗口体
    this.openInfoWindow(data);
    // 父级点位点击回调
    this.$emit("selectPoint", data);
});