vue.js - Here Maps - 重新定位地图，如果信息气泡在当前窗口中不完全可见

Question

我正在 Vue 中集成“heremap”。在我们的场景中，我们在地图上有很多标记。单击任何标记时，有关标记的一些信息将显示在信息气泡弹出窗口中。

如果标记位于地图顶部并且我单击了标记，则它的信息气泡在视口中不完全可见，因为某些气泡弹出窗口被隐藏，如下图所示。

单击此处地图上标记的信息气泡图片

在谷歌地图中，​​如果标记的信息窗口不完全可见，它会自动重新调整地图以适应窗口。

任何想法，我怎样才能在使用 vue 的 heremap 中实现这一点？

这是带有标记的heremap的工作示例。在鼠标上打开 Infobubble 单击 https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble

转到上面的链接，将地图向上移动一点。单击地图上的一个标记，它是带有显示的信息窗口气泡，并且地图不会重新定位以完全显示信息窗口气泡，如下图所示。

单击工作示例上的标记图片

这里是谷歌地图的相同工作示例。 https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

点击标记，它的信息窗口将开始显示，如果它没有完全在窗口中，地图会自动重新调整。

Answer 1

一种方法可能是在您单击时将地图置于标记的中心。这仍然不能保证整个信息窗口都会出现在屏幕上，具体取决于它有多大。但它可能在大多数情况下都有效。

您应该能够使用map.getCenter()

使用在

• https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble
• https://developer.here.com/documentation/examples/maps-js/events/position-on-mouse-click

您应该能够执行以下操作：

group.addEventListener('tap', function (evt) {
    var bubble = new H.ui.InfoBubble(coord, {
      // read custom data
      content: evt.target.getData(),
      position: group.getCenter()
    });
    // show info bubble
    ui.addBubble(bubble);
}, false);