0

我正在使用 Google Maps API v3 创建地图应用程序，其中一个部分是呈现的 InfoWindow 的 HTML 布局。目前，我必须在主 map.js 文件中创建一个长变量，并且在不破坏主应用程序的情况下很难编辑它，对于没有编写它的人来说，这是一个普遍的噩梦。

这是它目前的样子：

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 文件（如第一次预览中一样），然后让它在实际网站上正常显示？

我希望我已经正确解释了！

谢谢

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 回答