0

Google Maps API v3 を使用してマップ アプリケーションを作成しています。セクションの 1 つは、レンダリングされた InfoWindow の HTML レイアウトです。現時点では、メインの map.js ファイルに 1 つの長い変数を作成する必要がありますが、メインのアプリケーションを壊さずに編集するのは面倒で難しく、それを書いていない人にとっては一般的な悪夢です。

現時点では次のようになっています。

var html = "<div class=loc-one><div class=loc-name>" + name + "</div><hr class=loc-name-hr></div> <br/><div class=loc-two><div class=loc-two-l><div class=loc-add>" + address1 + "<br/>" + address2 + "<br/>" + address3 +"</div></div><div class=loc-two-r><div class=loc-type><strong>" + type + "</strong></div><div class=loc-price>Price Rating: " + price + "</div></div></div><hr class=loc-name-hr><div class=loc-three><div class=loc-three-times-head><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png /><span class=times-head-title>Opening Times</span></div><div class=loc-three-times>" + times + "</div></div><hr class=loc-name-hr><div class=loc-four><li><div class=loc-sec-img><a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png /><span class=loc-four-view>View Image</span></a></div></li></div>";

ご覧のとおり、JS ファイルに展開することもできません。コードが壊れてしまうからです。理想的には、次のようになりたいと思います。

<html>
<div class=loc-one>
<div class=loc-name>
"+ name +"
</div>
<hr class=loc-name-hr>
</div> 
<br/>
<div class=loc-two>
<div class=loc-two-l>
    <div class=loc-add>
    " + address1 + "
    <br/>
    " + address2 + "
    <br/>
    " + address3 + "
    </div>
</div>
<div class=loc-two-r>
    <div class=loc-type>
        <strong>" + type + "</strong>
    </div>
    <div class=loc-price>
        Price Rating: " + price + "
    </div>
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-three>
<div class=loc-three-times-head>
    <img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png />
    <span class=times-head-title>Opening Times</span>
</div>
<div class=loc-three-times>
    " + times + "
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-four>
<li>
<div class=loc-sec-img>
    <a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png />
    <span class=loc-four-view>View Image</span>
    </a>
</div>
</li>
</div>
</html>

Stackoverflow コーディング レイアウト用にフォーマットする必要があったため、実際のファイルではよりきれいに見えます。私はあなたがそれの要点を理解していると確信しています。

上記のような template.html (または .php?) ファイルが必要です。この HTML ファイルを介して変数を渡し、(最初のプレビューのように) map.js ファイルから HTML ファイルにリンクし、実際の Web サイトで正常に表示することは可能ですか?

私はそれを適切に説明したことを願っています！

ありがとう

4

2 に答える 2

1

適切な (ただしシンプルな) テンプレート フレームワークを使用する方がよいと思います。ハンドルバーを見てください。これを使用すると、20 分以内に起動して実行できます。彼らが使用するトリックは、javascript 変数でテンプレートを定義するのではなく、特別な型属性を持つスクリプト ブロックで定義し、テンプレート メカニズムにスクリプト ブロックを解析させることです。自分でテンプレートを作成しようとしないでください。すぐに窮地に追い込まれてしまいます。（少なくとも私は持っています:)）

于 2012-10-22T20:58:35.347 に答える
0

あなたは確かにJSで文字列を「広げる」ことができます：

var html = "<html>" + 
"<div class=loc-one>" + 
"<div class=loc-name>" +
name +
"</div>" + 
"<hr class=loc-name-hr>" + 
... etc

代わりに、普遍的にサポートされていないこのアプローチを試すこともできます。

var html = "<html> \
<div class=loc-one>\
<div class=loc-name>\
"+ name +"
</div>\ 
<hr class=loc-name-hr>\
... etc

この前の質問を参照してください: JavaScript で複数行の文字列を作成する

于 2012-10-23T08:49:33.100 に答える