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

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

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

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

Click on the Picture of Info Bubble of a marker on heremap

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

任何想法，我如何使用 vue 在 heremap 中实现这一点？

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

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

Click on the Picture of Marker on working example

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

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

解决方法

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

您应该能够使用 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);