將我的contentstring鏈接到js文件中的數據

Question

我剛剛完成了一個映射，並希望contenttring從我的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。