0

Vueに「ヒアマップ」を統合しています。このシナリオでは、マップ上に多数のマーカーがあります。任意のマーカーをクリックすると、マーカーに関するいくつかの情報が情報バブル ポップアップに表示されます。

マーカーがマップの上部にあり、マーカーをクリックした場合、下の写真に見られるように、バブル ポップアップの一部が非表示になっているため、その情報バブルがビューポートに完全には表示されません。

ヒアマップ上のマーカーの情報バブルの画像をクリックします

Google マップでは、マーカーの情報ウィンドウが完全に表示されていない場合、ウィンドウに合わせてマップを自動的に再調整します。

vueを使用してヒアマップでこれを達成するにはどうすればよいですか?

これは、マーカー付きのヒアマップの実例です。マウスで Infobubble を開く https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubbleをクリックします

上記のリンクに移動し、地図を少し上に移動します。地図上のマーカーを 1 つクリックすると、それは情報ウィンドウの吹き出しであり、下の図に示すように、情報ウィンドウの吹き出しを完全に表示するために地図自体を再配置しません。

作業例のマーカーの画像をクリックします

これは、Googleマップの同じ作業例です。 https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

マーカーをクリックすると、その情報ウィンドウが表示され始めます。マーカーがウィンドウ内に完全に収まっていない場合は、マップが自動的に再調整されます。

4

1 に答える 1

0

1 つの方法として、マーカーをクリックするたびにマップをマーカーの中央に配置することが考えられます。これは、情報ウィンドウの大きさによっては、情報ウィンドウ全体が画面に表示されることを保証するものではありません。しかし、ほとんどの場合、うまくいく可能性があります。

を使用してマップの中心を取得できるはずですmap.getCenter()

で与えられた例を使用して

次のようなことができるはずです：

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);
于 2021-06-15T11:15:50.820 に答える