Creative Saplings

マーカー

12月 17, 2020
No Comments

はじめに

マーカーは地図上の場所を識別します。デフォルトでは、マーカーは標準画像を使用します。マーカーはカスタム画像を表示できます。その場合、通常は「アイコン」と呼ばれます。マーカーとアイコンは、タイプMarkerのオブジェクトです。マーカーのコンストラクター内でカスタムアイコンを設定するか、マーカーでsetIcon()を呼び出すことができます。マーカー画像のカスタマイズの詳細については以下をご覧ください。

大まかに言えば、マーカーはオーバーレイの一種です。他の種類のオーバーレイについては、地図上での描画を参照してください。

マーカーはインタラクティブになるように設計されています。たとえば、デフォルトではイベント。イベントリスナーを追加して、カスタム情報を表示する情報ウィンドウを表示できます。マーカーのdraggableプロパティをtrueに変更します。ドラッグ可能なマーカーの詳細については、以下を参照してください。

マーカーを追加する

google.maps.Markerコンストラクターは単一のMarker optionsオブジェクトリテラル。マーカーの初期プロパティを指定します。

次のフィールドは特に重要であり、マーカーを作成するときに一般的に設定されます。

  • position(必須)は、マーカーの初期位置を識別するLatLngを指定します。 LatLngを取得する1つの方法は、ジオコーディングサービスを使用することです。
  • map(オプション)は、マーカーを配置するMapを指定します。マーカーの作成時にマップを指定しない場合、マーカーは作成されますが、マップに添付(または表示)されません。後でマーカーのsetMap()メソッド。

次の例では、オーストラリアの中心部にあるウルルの地図に簡単なマーカーを追加します。

上記の例では、マーカーは次のとおりです。マーカーオプションのmapプロパティを使用して、マーカーの作成時にマップ上に配置されます。または、マーカーのsetMap()メソッド:

マーカーのtitleがツールチップとして表示されます。

マーカーのコンストラクターでMarker optionsを渡したくない場合は、代わりに最後に空のオブジェクト{}を渡します。コンストラクターの引数。

例を表示

マーカーを削除する

マップからマーカーを削除するには、

メソッドは引数としてnullを渡します。

marker.setMap(null);

上記に注意してくださいメソッドはマーカーを削除しません。マップからマーカーを削除します。代わりにマーカーを削除する場合は、マーカーをマップから削除してから、マーカー自体をnullに設定する必要があります。

管理する場合マーカーのセット。マーカーを保持する配列を作成する必要があります。この配列を使用すると、マーカーを削除する必要があるときに、配列内の各マーカーでsetMap()を順番に呼び出すことができます。マップからマーカーを削除してから、配列のlengthを0に設定すると、マーカーを削除できます。これにより、マーカーへのすべての参照が削除されます。マーカー。

例を表示

マーカーをアニメーション化する

マーカーをアニメーション化して、さまざまな状況で動的な動きを示すようにすることができます。マーカーはアニメーション化されています。タイプgoogle.maps.Animationのマーカーのanimationプロパティを使用してください。次のAnimation値がサポートされています。

  • DROPは、マーカーを上からドロップする必要があることを示しますマップ上に最初に配置されたときの最終的な場所へのマップ。マーカーが静止するとアニメーションは停止し、animationはnullに戻ります。このタイプのアニメーションは通常、Markerの作成時に指定されます。
  • BOUNCEは、マーカーがバウンスする必要があることを示します場所。バウンスマーカーは、そのanimationプロパティが明示的にnullに設定されるまでバウンスし続けます。

あなたMarkerオブジェクトでsetAnimation()を呼び出すことにより、既存のマーカーでアニメーションを開始できます。

マーカーが多数ある場合、一度にマップにドロップしたくない場合があります。以下に示すようなパターンを使用して、setTimeout()を使用してマーカーの間隔を空けることができます。

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

例を見る

マーカー画像をカスタマイズする

マーカーに文字や数字を表示する場合は、マーカーラベルを使用できます。さらにカスタマイズが必要な場合は、デフォルトのマーカー画像の代わりに表示するアイコンを定義できます。アイコンの定義には、マーカーの視覚的動作を決定するいくつかのプロパティの設定が含まれます。

以下のセクションでは、マーカーラベル、単純なアイコン、複雑なアイコン、および記号(ベクトルアイコン)について説明します。

マーカーラベル

マーカーラベルは、マーカー内に表示される文字または数字です。このセクションのマーカー画像には、文字「B」が付いたマーカーラベルが表示されます。マーカーラベルは、文字列、または文字列とその他のラベルプロパティを含むMarkerLabelオブジェクトとして指定できます。

マーカーを作成するときに、 MarkerOptionsオブジェクトのlabelプロパティ。または、MarkerオブジェクトでsetLabel()を呼び出して、既存のマーカーにラベルを設定することもできます。

次の例では、ユーザーが地図をクリックすると、ラベル付きのマーカーが表示されます。 :

シンプルなアイコン

最も基本的なケースでは、アイコンは、デフォルトのGoogleマップの画鋲アイコンの代わりに使用する画像を示すことができます。このようなアイコンを指定するには、マーカーのiconプロパティを画像のURLに設定します。MapsJavaScriptAPIはアイコンのサイズを自動的に設定します。

複雑なアイコン

クリック可能な領域を示すために複雑な形状を指定し、他のオーバーレイと比較してアイコンをどのように表示するか(「スタック順序」)を指定できます。この方法で指定したアイコンは、ivを設定する必要があります。タイプIconのオブジェクトに対するid = “9ffa503dc8″>

プロパティ。

Iconオブジェクトは定義します画像。アイコンのsize、アイコンのoriginも定義します(必要な画像が大きい画像の一部である場合)たとえば、スプライト内の画像)、およびアイコンのホットスポットを配置するanchor(原点に基づく)。

カスタムマーカー付きのラベルを使用している場合は、labelOriginプロパティを使用してラベルをオブジェクト。

MarkerImageオブジェクトをタイプIcon

Maps JavaScript APIのバージョン3.10までは、複雑なアイコンはMarkerImageオブジェクトとして定義されていました。 Iconオブジェクトリテラルはバージョン3.10で追加され、バージョン3.11以降のMarkerImageに置き換わります。 IconオブジェクトリテラルはMarkerImageと同じパラメータをサポートしているため、MarkerImageを簡単に変換できます。コンストラクターを削除し、前のパラメーターを{}でラップし、各パラメーターの名前を追加して、Iconに追加します。例:

になる

シンボル

ラスターイメージに加えて、マーカーはSymbolsと呼ばれるベクトルパスの表示をサポートします。 。ベクターパスを表示するには、目的のパスを含むSymbolオブジェクトリテラルをマーカーのiconプロパティに渡します。 google.maps.SymbolPathで事前定義されたパスのいずれかを使用するか、SVGパス表記を使用してカスタムパスを定義できます。

詳細については、シンボルのドキュメントを参照してください。

作成マーカーをドラッグ可能

ユーザーがマーカーを地図上の別の場所にドラッグできるようにするには、draggableをtrueに設定します。マーカーオプションで。

マーカーのさらなるカスタマイズ

完全にカスタマイズされたマーカーについては、カスタマイズされたポップアップの例を参照してください。

Articles
Previous Post

健康を管理する:ティーンエイジャーのためのガイド

Next Post

ザリガニの茹で

コメントを残す コメントをキャンセル

最近の投稿

  • 世界で最高の写真学校、2020年
  • ソブリン市民が反政府哲学を道路に持ち込む
  • スタッコ修理費用ガイド
  • マックレーカー
  • Precision Oncology (日本語)

アーカイブ

  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • Deutsch
  • Nederlands
  • Svenska
  • Norsk
  • Dansk
  • Español
  • Français
  • Português
  • Italiano
  • Română
  • Polski
  • Čeština
  • Magyar
  • Suomi
  • 日本語
  • 한국어
Proudly powered by WordPress | Theme: Fmi by Forrss.