链接我的内容字符串的数据在js文件

Question

我刚刚完成了一张地图，并希望内容字符串从我的js文件中获取数据，以添加到标记的信息框中。我让它在一个简单的infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+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>

我的js文件的一个示例:

var json = [{
        "name" : "Acton Street",
        "latitude" : 51.52834,
        "longitude" : -0.118619,
        "description" : "Leaf",
        "category" : 7
    }, {
        "name" : "Aldermans Hill",
        "latitude" : 51.618522,
        "longitude" : -0.11167,
        "description" : "Pod",
        "category" : 7
    }, {
        "name" : "Aldermans Hill",
        "latitude" : 51.618522,
        "longitude" : -0.11167,
        "description" : "Turner",
        "category" : 7
    },{
        "name" : "Alexandra Road/Holloway Street CP",
        "latitude" : 51.469744,
        "longitude" : -0.363063,
        "description" : "Box",
        "category" : 7
    }]

让contentString查找"description"使用contentString2查找name和contentString3查找"纬度"one_answers"经度"

希望你能提醒我一下。

欢呼

Answer 1

您试过updateTab吗?

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

看一些例子http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

还要注意id属性必须是唯一的。就像现在一样，你所有的内容div都有相同的id .