Javascript 将我的contentstring链接到js文件中的数据

Javascript 将我的contentstring链接到js文件中的数据,javascript,infobubble,Javascript,Infobubble,我刚刚完成了一个映射,希望contentstring从我的js文件中获取数据,并将其添加到标记的信息框中。我让它在一个简单的infoBubble.setContent(“”+data.description+“”+data.name)下工作查询。但现在我已经创建了选项卡,并要求每个选项卡从map.js文件中读取不同的数据 到目前为止,我的代码是: window.onload = function () { // Creating a new map var map = new

我刚刚完成了一个映射,希望contentstring从我的js文件中获取数据,并将其添加到标记的信息框中。我让它在一个简单的
infoBubble.setContent(“”+data.description+“”+data.name)下工作查询。但现在我已经创建了选项卡,并要求每个选项卡从map.js文件中读取不同的数据

到目前为止,我的代码是:

window.onload = function () {

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
            center : new google.maps.LatLng(51.50746, -0.127594),
            zoom : 10,
            mapTypeId : google.maps.MapTypeId.ROADMAP
            });

    var contentString = '<div id="content">'+
    '<h1>'+'</h1>'+
    '<p><b>Test</b>'
    '</div>';

    var contentString2 = '<div id="content">'+
    '<h1>Info</h1>'+
    '<p><b>Info</b>'
    '</div>';

    var contentString3 = '<div id="content">'+
    '<h1>More</h1>'+
    '<p><b>More</b>'
    '</div>';                   

            // Creating a global infoBox object that will be reused by all markers
    infoBubble = new InfoBubble({
      minWidth: 300,
      maxWidth: 300,
      minHeight: 150,
      maxHeight: 350,
      arrowSize: 50,
      arrowPosition: 50,
      arrowStyle: 2,
      borderRadius: 10,
      shadowStyle: 1,
    });

    var div = document.createElement('DIV');
    div.innerHTML = 'test 101';

    infoBubble.addTab('Details', contentString);
    infoBubble.addTab('Info', contentString2);
    infoBubble.addTab('More', contentString3);


    // Custom Markers
    var markers = {};
      var categoryIcons = {
        1 : "images/liver_marker1.png",
        2 : "images/liver_marker2.png",
        3 : "images/liver_marker3.png",
        4 : "images/liver_marker4.png",
        5 : "images/liver_marker5.png",
        6 : "images/liver_marker6.png",
        7 : "images/liver_marker.png"
      }

    // Looping through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.latitude, data.longitude);


        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
                position : latLng,
                map : map,
                title : data.title,
                icon : categoryIcons[data.category]
            });

        // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
        (function (marker, data) {

            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, 'click', function(e) {
                //infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name);
                infoBubble.open(map, marker);
                map.panTo(loc);
});

        })(marker, data);

    }

}

})();
google.maps.event.addDomListener(window, 'load', initialize);
</script>
基本上让contentString查找“描述” 让contentString2查找“名称” contentString3查找“纬度”和“经度”

我很想知道这件事


干杯你试过更新选项卡了吗

//update the first tab content
infoBubble.updateTab(0, 'Details', 'new content');
请看一些例子

还要注意,
id
属性必须是唯一的。现在,您的所有内容div都具有相同的
id

//update the first tab content
infoBubble.updateTab(0, 'Details', 'new content');