4

そこで、自分のページに Google マップを設定するスクリプトをいくつか書きました。これらのスクリプトは<head>マイページに含まれており、jQuery を使用して、ページ上の住所のリストから生成されたマーカーでマップを作成します。

ただし、javascript がマーカーを正しく配置するために必要な各アドレスの正確な座標データがあります。これは、画面上でユーザーに表示したい情報ではないため、そのデータをドキュメントに配置する「ベスト プラクティス」の方法は何ですか?

4

7 に答える 7

1

私が最初に考えたのは、CSV などのデータを使用した非表示の入力でした。データは実際には秘密ではないため、表示用ではありません。

 <input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />

次に、jquery でアクセスします。

 var myCoordsCSV = $("#coordinates").val();

編集：以下の回答では、別の回答で指摘されているように、複数の非表示の入力を使用することと組み合わせたより良いソリューションとなる JSON について言及しています。

于 2008-12-04T10:19:30.300 に答える
1

Gareth さん、http: //www.json.org/ で JSON をご覧になることをお勧めします。

コンパクトさの利点とは別に、強力なサーバー側のサポートがあり、将来、HTTPRequest を使用して座標を動的にロードすることを決定した場合、既存のスクリプトを大幅に修正する必要なく、非常に簡単に実行できます。

JSON — JavaScript Object Notation は、事実上、JavaScript オブジェクトをシリアル化するネイティブな方法です。

ここにいくつかの例があります: http://www.json.org/example.html

JSON に記録されたオブジェクトの JavaScript 配列にすべての住所情報を保存し、画面上にリストを動的に作成することもできます。これにより、「実行時」に必要な方法でアドレスを簡単にソート、フィルタリング、および操作することができます。

別の方法は、各アドレスをタグで受け入れ (単純な div で十分です)、座標を含むタグに新しい属性を導入することです。

<div id="addr1" coordinates="...">
    17 Coldwell Drive<br />
    Blue Mountain<br />
    BA93 1PF<br />
    United Kindom
</div>

それから

var myCoordsCSV = $("addr1").coordinates;

必要に応じて、2 番目のアプローチを JSON (座標オブジェクトの格納) と組み合わせることができます。座標ごとに 2 つの属性を追加したり、カンマ区切りのリストを保持したりすることができます。

2 番目のアプローチも適切に劣化し、検索ボットに適しています。

于 2008-12-04T10:28:05.197 に答える
1

スタイルを使用して何かを非表示にすることはお勧めしません。css サポートがない (または無効になっている) ブラウザーに表示され、奇妙に見えます。

それをjavascript変数に保存するか、次のような非表示の値を持つフォームを追加することができます（未使用のフォーム内に検証して確認します）：

<form action="#" method="get" id="myHiddenValues">
   <input type="text" name="hiddenval1" id="hiddenval1" value="1234"/>
   <input type="text" name="hiddenval2" id="hiddenval2" value="5678"/>
</form>

javascriptから読み込んで更新できます。

于 2008-12-04T10:23:29.840 に答える
0

情報がユーザーに表示されないようにする場合は、ドキュメントにとどまるべきではありません。たとえば、データはスクリプト領域にとどまることができます。ただし、さまざまな理由でこれが不可能な場合は、情報を非表示にする style="display:none" で div を使用できます。

于 2008-12-04T10:14:35.710 に答える
0

データは、アクセスしたい人に常に表示されます。それを隠そうとすることは、それに慣れていない人を遅くするだけです. 私の提案は、XHR を使用しないことです。XHR は多くの人にとって遅く、常にページの読み込みに時間がかかるため、最小限に抑える必要があります。配列を使用します。

var myArray = new Array();  
myArray.push([1.000,1.000,"test1"]);  
myArray.push([2.000,2.000,"test2"]);  
myArray.push([3.000,3.000,"test3"]);  
for(i=0;i<myArray.length;i++){  
    yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]);  
}

なんかね？

于 2008-12-04T10:55:32.957 に答える
0

すでに Jquery を持っているので、別のページ/スクリプトに AJAX 呼び出しを行って座標データを取得してみませんか?

于 2008-12-04T10:30:23.307 に答える
0

Javascript または JSON でデータを保持することは、目立たない Javascript についての要点を欠いています。「目立たない」ことの重要な点の 1 つは、Javascript が存在しない場合、理想的には CSS が存在しない場合でも、適切に劣化することです。このため、ユーザーがデータを確認できるように、データを Javascript ではなくドキュメントに配置する必要があります。

さらに、CSS なしできれいに見える table または div 構造で表示する必要があります。この場合、テーブルはおそらくこの種のデータを表現するための正しいセマンティック構造です。CSS を持っているが Javascript を持っていない人のために、テーブルをさらにスタイル設定することができます。Javascript は簡単にデータを解析してマップに配置できますが、Javascript がサポートされていない場合でもデータは表示されます。

さらなる利点は、検索エンジンなどのロボットやサードパーティのマッシュアップを作成したい人が簡単にスクレイピングできることです。(共有したくない場合、これはマイナス面であることがわかりますが、誰かが十分なデータを必要とする場合は、とにかくページからデータを取得します。) また、スクリーン リーダーを使用する視覚障害のあるユーザーのためにきちんとした形式で表示されます。 .

ここで、テーブルをデフォルトで表示したくないので、CSS を使用して非表示にする必要があります。しかし、ユーザーが CSS を持っていて Javascript を持っていない場合はどうなるでしょうか? 次に、おそらくテーブルを表示したいと思うでしょう...それが優雅に劣化することです。したがって、CSS でテーブルを表示できるようにし (つまり、明示的に非表示にしないでください)、Javascript を実行して初期化時にテーブルを非表示にします。

document.getElementById("geodata").style.display = "none";

またはいくつかのライブラリ固有の同等物、例えば

$("geodata").hide()

唯一の問題は、これを document.onload() で実行すると、テーブルが数秒間表示されることです。したがって、テーブルを出力した直後に script タグに含めます。これは、HTML にスクリプト タグを含めても問題ない状況の 1 つです。その場合、インライン スクリプトが評価されるまでにライブラリがまだロードされていない可能性があるため、ライブラリ固有のコードの使用は避けてください。

これで、すべてのケースがカバーされました: - JS と CSS - マップに適切に表示されたデータ - JS はありませんが、CSS - テーブルに適切に表示されたデータ - JS も CSS もありません - 生の HTML テーブルに表示されたデータ (他のケースでは JS)また、CSS が発生することはめったにありません。必要に応じて対処できますが、意味がありません)。

きれいに構築されたデータ構造を解析しているため、Javascript コードもクリーンになります。開発中にテーブルを簡単に調べて、適切なデータがあるかどうか、マップがそのデータを正しく反映しているかどうかを確認できます。

于 2008-12-04T13:27:49.500 に答える