Question

我刚刚完成了一个地图，并希望contentstring从我的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寻找“描述” 让contentString2寻找“名字” 和contentString3查找“纬度”和“经度”

非常喜欢这个。

干杯

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。

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

1 个答案: