使用PHP/HTML文件作为模板的Javascript_Php_Javascript_Html_Variables_Google Maps Api 3

使用PHP/HTML文件作为模板的Javascript

php javascript html variables google-maps-api-3

使用PHP/HTML文件作为模板的Javascript,php,javascript,html,variables,google-maps-api-3,Php,Javascript,Html,Variables,Google Maps Api 3,我正在使用GoogleMapsAPIv3创建一个地图应用程序，其中一个部分是呈现信息窗口的HTML布局。目前，我必须在main map.js文件中创建一个长变量，如果不破坏主应用程序，它会很混乱，很难编辑，对任何没有编写它的人来说都是一场噩梦这就是目前的情况： var html = "<div class=loc-one><div class=loc-name>" + name + "</div><hr class=loc-name-hr>&l

我正在使用GoogleMapsAPIv3创建一个地图应用程序，其中一个部分是呈现信息窗口的HTML布局。目前，我必须在main 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>";

var html=“”+name+”

“+address1+”
“+address2+”
“+address3+”“+type+”价格评级：“+Price+”
开盘时间“+Times+””；

正如您将看到的，我甚至不能在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>


“+name+”



“+地址1+”


“+地址2+”


“+地址3+”
“+类型+”
价格评级：“+价格+”

开放时间
“+次+”

它在实际文件中看起来更干净，因为我必须为Stackoverflow编码布局格式化它。不过我相信你已经明白了要点

我希望有一个类似上面的template.html（或.php？）文件。是否可以通过此HTML文件传递变量，从map.js文件链接到HTML文件（如第一次预览），然后在实际网站上正常显示

我希望我已经解释清楚了

谢谢

我认为您最好使用一个适当（但简单）的模板框架。看一看。使用它，你就可以在20分钟内启动并运行。他们使用的技巧不是在javascript变量中定义模板，而是在具有特殊类型属性的脚本块中定义模板，并让模板机制解析脚本块。不要试图自己构建模板，你会很快把自己画进一个角落。（至少我有：）

你当然可以在JS中“展开”一个字符串：

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

var html=”“+
"" + 
"" +
名字+
"" + 
“”+
... 等

您也可以尝试这种方法，但这种方法并不普遍受支持：

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

var html=”\
\
\
“+name+”
\ 
\
等

请参阅前面的问题：

您不应该在JS中生成这样的HTML，否则您将遇到类似的问题。您不能使用PHP呈现视图和JS吗？有许多免费的PHP模板引擎可用。将页面构建为字符串是疯狂的。这就是为什么我要更改它！这是默认的m根据API文档，用于显示的方法。如果你问我，这真是一个巨大的痛苦，我甚至不是一个程序员！这看起来真的很有用-我会尝试一下。谢谢：）太好了。如果它对你有效，请确保将答案标记为正确答案，以便其他人也能从中受益。愉快的编码。