Q

Googleマップマーカーのカスタムツールチップを追加するには？

2012-03-06 9 views 11 likes

11

Googleマップマーカーのマウスのホバー上にイメージとテキストを表示していいツールチップを表示する必要があります。
marker.setTitle - テキストのみで動作し、HTMLでは動作しません
Googleマップのapiには標準的なソリューションがありますか？
libを提案してツールチップを作成して見栄えを良くすることはできますか？Googleマップマーカーのカスタムツールチップを追加するには？

2012-03-06 Oleg Dats

A

答えて

3

マーカーのmouseoverイベントをリッスンし、infoWindowがそのイベントとともに表示されるようにすることができます。

インフォボックスを取得したら、apiでうまくサポートされている方法で画像やテキストを挿入できます。

2012-03-06 10:10:33 Oliver

+0

はい、ただしinfoWindowはカスタマイズが難しいです。それは予め定義された設計を有する。インフォボックスは私のために提供されています。 –

4

DIYソリューションが必要な場合は、ここでプロジェクトで行ったことがあります。

cssの位置を絶対に設定して、ページに非表示のdivを作成します。 DIVがマップコンテナ（z-index）の上に表示されていることを確認します。
マーカーにmouseoverイベントとmouseoutイベントをバインドして、showDiv/hideDiv関数をトリガします。
マウスがマーカーを移動するとき、マウスx、yの位置を取得し、それに応じてDIVの上端と左端のcss値を設定し、cssをdisplay：blockに設定します。
マウスが切れているときは、再度DIVを非表示にします。

このようにして、「情報ウィンドウ」の表示方法とその内容を実際に制御できます。がんばろう。

2012-03-06 10:27:14 MrUpsidown

+0

google.maps.event.addListenerを使用してマーカーのmouseoverイベントを処理すると、すべてのイベントオブジェクトには緯度と経度が含まれるため、マウスのx、y位置を取得しません。そのため、このアプローチは実装できません。 – Justin

+0

私はあなたがマーカーリスナーからマウスの位置を取得するとは言いませんでした。他のスクリプトと同じようにDOMから取得します。 – MrUpsidown

0

オレグ、なぜあなたはGoogleマップのAPIに縛られていますか？カスタムツールチップをDOMに挿入できます。

mouseover、mousemove、およびmouseoutリスナーのイベントリスナーをマップ（またはマップの特定の部分）にアタッチします。それらのリスナーのそれぞれは、マウス座標を与える引数も与えます。

は、マウスアウトに、マウスオーバーの上に

を位置決めするためのツールチップのCSS上の固定/絶対的なスタイルを使用してのMouseMoveにDOM にカーソル位置にツールチップを注入し、（左と上）の位置を更新ツールチップをDOMから削除します。

Googleマップのポリゴン用に最近作成しました。 Googleマップのほぼすべての機能がイベントをサポートしているため、マップの他の部分について私のアプローチを再利用することができます。

リンク：https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458

2017-05-25 16:17:17

関連する問題