问题描述
我正在 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);