問題タブ [infobubble]

InfoWindowは Google Maps API v3 の標準部分であり、ユーザーが地図上にポップアップ ウィンドウを作成できるようにしますが、同じことを行うと思われる他の 2 つのライブラリもあります。

• インフォボックス
• インフォバブル

これら 2 つは元の InfoWindow より多くのカスタマイズ オプションを提供する可能性が高いことは理解していますが、他に違いはありますか? 彼らは競争相手ですか、それとも異なる仕事をしていますか? 一方が他方よりも最新ですか？

私はAngularJSを使用しています。動的コンテンツと ng-click、ng-mouseover などの AngularJS のいくつかの機能を備えた InfoBubble を提示したいと考えています。InfoWindows を使用するには、最初に html をコンパイルしてから、コンパイルした html を InfoWindows のコンテンツとして設定する必要がありました。残念ながら、これは InfoBubbles では機能しません。静的なhtmlを追加すると問題ありませんが、コンパイルされたhtmlを追加するとコンテンツとして何もないようです。

さまざまな場所にバブル情報を追加して、Web アプリケーションを改善しています。

次の例があります：

取得するために改行を追加する方法title class：

そしてそうではない

ありがとうございました

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

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