0

マップを完成させたばかりで、コンテンツ文字列で 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 で「緯度」と「経度」を検索します。

これについて頭を上げたいと思います。

乾杯

4

1 に答える 1

0

試しました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.

于 2013-04-20T21:30:08.557 に答える