Question

我定义了一个变量，我想用它来编写一些HTML'内容'代码。但是我是JavaScript的新手，我确实做错了。

我正在尝试将infoWindow绑定的内容写入Google地图标记。我使用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。

Answer 2

我不认为使用这么多替换是一个好主意。为什么不使用以下内容？

import javax.swing.UIManager.*;

try {
    for (LookAndFeelInfo info : UIManager.getInstalledLookAndFeels()) {
        if ("Nimbus".equals(info.getName())) {
            UIManager.setLookAndFeel(info.getClassName());
            break;
        }
    }
} catch (Exception e) {
    // If Nimbus is not available, you can set the GUI to another look and feel.
}

字符串格式化JavaScript

2 个答案: