AvadaテーマのOpenStreetMapエレメントを使用して、より正確で柔軟な地図表示を作成する方法

多くのサイトでは、ウェブマスターが地図をカスタマイズしたり、複数の場所を表示したりするのに役立っている。グーグルマップは一般的な選択だが、Avadaテーマの OpenStreetMap要素 はオープンソースで柔軟な代替手段を提供している。この記事では、Avadaの OpenStreetMap要素を追加、編集する方法とカスタマイズされた地図より効率的なユーザーエクスペリエンスを提供するために、ウェブサイト上の位置を設定します。

AvadaのOpenStreetMap要素とは何ですか？

オープンストリートマップ(OSM)は、Google Mapsと同様の機能を提供するオープンソースの地図サービスだが、世界中のユーザーによってデータが共有・管理されている。 OpenStreetMap要素 OSMマップをページに埋め込むことで、複数の場所を表示したり、マップスタイルを調整したり、必要に応じてコンテンツをカスタマイズしたりすることができます。このエレメントは、地理的な場所を表示するのに適しているだけでなく、高度なカスタマイズオプションでさまざまなユーザーのニーズを満たします。

利用シーン

マルチロケーション・プレゼンテーション複数のオフィスや店舗などを表示し、お客様がすぐに場所を見つけられるようにするのに適しています。
ショーケース・オフィス企業イメージの向上とユーザーからの信頼を得るために、企業サイト内に様々なオフィスの所在地を地図で表示します。
ツアーまたはアトラクションの紹介に対して旅または、複数の目的地やアトラクションの場所を表示するアトラクションのウェブサイト。
ローカル・マーチャント・ショーケースサービスエリアが分かりやすいように、地域のショップやサービスプロバイダーの所在地を複数表示します。

AvadaのOpenStreetMap要素の使い方

アバダでの使い方は以下の通り。 OpenStreetMap要素 マップの追加やカスタマイズを簡単に行うための詳細な手順をご紹介します。

ステップ1: OpenStreetMap要素の追加

アバダ・エディターを開くをクリックし、マップを追加したいページを選択します。
エレメントパネルで 「オープンストリートマップ 要素を作成し、ページ上の適切な場所にドラッグします。

ステップ2：場所の追加

オプション 編集ポジションをクリックして編集画面に入る。
ある キャプション フィールドにロケーション名を入力する。例えば 「ニューヨーク州メルビル に場所を指定する。

輸入 場所の緯度と経度.オープンストリートマップアドレスによる検索をサポートし、それは場所の精度を確保するために、正確な緯度と経度のデータを使用することをお勧めします、あなたはアドレスバーにアドレスを入力することができます、それは自動的に緯度と経度のデータに変換されます、あなたは、地図上でクリックすることができます。 マーキング をドラッグして位置を調整する。

ステップ3：マーカーアイコンのカスタマイズ

ある タグアイコン オプションでは、各ロケーションのマーカーアイコンを選択できます。ほとんどの場合、複数の場所に同じマーカーアイコンを使用することが望ましいです。パーソナライズされたアイコンが必要な場合は、アイコンライブラリから選択するか、デフォルトのマーカーの代わりにSVGアイコンを使用することができます。

選択可能 ポップアップ表示タイプマーカーは、クリックするとポップアップ・メッセージ・ウィンドウに表示されるか、マウスカーソルを乗せるとメッセージが表示されるように設定される。

ステップ4：マップのスタイルと設定

切り替える 一般設定 タグを設定する。 タイプAvadaでは、サイト全体のデザインに合わせて様々なスタイルの地図が選択できます。より高度なスタイル（Mapboxなど）の場合は Mapboxのアクセストークン.

セットアップ 地図の大きさ例えば、幅を100%、高さを800pxに設定して、地図が適切な領域を占めるようにします。

セットアップ ズームレベル複数の場所を表示する場合は、ズームレベルを低い値（例えば5）に設定し、より多くのエリアを表示することをお勧めします。

ある ポップアップ表示タイプ の中で ツールのヒント もしかしたら スタティック・ディスプレイ情報をどのように見せたいかによる。

ステップ5：マークアップとポップアップスタイルのカスタマイズ

ある ひねり出す タブの下で、さらにカスタマイズすることができます。 タグアイコン 例えば、マークアップのサイズ、色、スタイルを設定することができます。アニメーション効果(脈動アニメーションなど）。

によって ポップアップウィンドウ 見出しやコンテンツのタイポグラフィ、フォント、背景色などを設定し、サイト全体のスタイルと一致するようにする。

溶け込む ポップアップ・ウィンドウの余白と内側の余白ページレイアウトとの一貫性を持たせるためだ。

概要

アバダの OpenStreetMap要素 は、様々なシナリオで場所を提示するための非常に強力で柔軟なツールです。この記事の手順で、簡単に OpenStreetMap要素 あなたのウェブサイトに追加して、ウェブサイトのユーザーエクスペリエンスとインタラクティブ性を向上させましょう。WordPress関連のチュートリアルや情報については光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み