javascript - 字符串格式化 JavaScript

Question

我定义了一个变量，我想用它来编写一些 HTML“内容”代码。然而，我是 JavaScript 的新手，我肯定做错了什么。

我正在尝试将 infoWindow 的内容写入绑定(bind)到 Google map 标记的内容。我使用 JSON 的内容将我的内容写在一个名为 description 的函数中。

感谢您的帮助。

    <script>
         var json = [
{
"lat":51.5202,
"lng":-0.073101,
"title":"nice single room*--only 135pw- close to BRICK LANE | United Kingdom | Gumtree",
"roTy":"Single room",
"prTy":"House",
"price":"585"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5202,
"lng":-0.073101,
"title":"Come and enjoy the Vibrant East London, Many rooms available from 130pw | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5217,
"lng":-0.072289,
"title":"MANY ROOMS AVAILABLE *from 130PW all included | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Shoreditch High Street",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
] 

var myCenter=new google.maps.LatLng(51.5183,-0.068066);

function initialize()
{
    var mapProp = {
        center:myCenter,
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById       ("googleMap"),mapProp);

var infowindow =  new google.maps.InfoWindow({
    content: ""
});

for (var i = 0, length = json.length; i < length; i++) {
    var data=json[i];
    var latLng = new google.maps.LatLng(data.lat, data.lng); 
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
    });
    var descr = description(data);
    bindInfoWindow(marker, map, infowindow, descr);
    } 
}

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">'%s'</h1>';
        entete += '<div id="bodyContent">';
        entete += '<p>roTy in prTy | laTy | £pr per calendar month</p>';
        entete += '<p>ar | Closest train station : sta</p>';
        entete += '<p>descr</p>';
        entete += '<p><a href="link">Access the original ad</a></p>';
        entete += '</div></div>';

        entete.replace('%s',data.website);
        entete.replace('roTy',data.roTy);
        entete.replace('prTy',data.roTy);
        entete.replace('laTy',data.laTy);
        entete.replace('pr',data.price);       
        entete.replace('ar',data.area);
        entete.replace('sta',data.sta);        
        entete.replace('descr',data.title);        
        entete.replace('link',data.link);

    return entete;
}
function bindInfoWindow(marker, map, infowindow, descri) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(descri);
        infowindow.open(map, marker);
     });
}

google.maps.event.addDomListener(window, 'load', initialize);


    </script>

Answer 1

您好，我认为问题出在函数 description 上。它应该返回一个值以分配给 descr var descr = description(data) 或者您可以将 entete 保留为 global variable即在我不知道对你可行的功能之外定义它。所以你只要试试 :-

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">%s</h1>';
        entete.replace('%s',data.website);
...//similar statements here
...
...
return entete; 
}

更新

当我想创建很多元素时，我通常会使用这样的函数

function addElements(tag,attribute,attributeValue,text)
{
    var element;
    element = document.createElement(tag);

    if(attribute != undefined && attribute != null &&  attributeValue != undefined &&  attributeValue != null)
    {
        for(itr=0;itr<attribute.length;itr++)
        {
            element.setAttribute(attribute[itr], attributeValue[itr])
        }
    }   
    if(text != undefined && text != null && text.length != 0)
    {
        element.textContent=text;
    }   
    return element
}

可以这样用

var entete =  addElements('div',['id'],['content'],null).
append(addElements('h1',['id','class'],'firstHeading','firstHeading'],null).
...//for other elements
)

但我不知道你是否真的需要。如果您需要this上述方法应有的优点..

但如果你不这样做

function description(data)
{
var entete = '<div id="content">';
entete += '<h1 id="firstHeading" class="firstHeading">'+data.website+'</h1>';
entete += '<div id="bodyContent">';
entete += '<p>'+data.roTy+' in '+data.roTy+' | '+data.laTy+' | £'+data.price+' per calendar month</p>';
entete += '<p>'+data.area+' | Closest train station : '+data.sta+'</p>';
entete += '<p>'+data.title+'</p>';
entete += '<p><a href="'+data.link+'">Access the original ad</a></p>';
entete += '</div></div>';
return entete;
}

应该没问题。顺便说一句，谢谢阅读 infowindows因为这个问题。