1

私は、API v3 にタブを提供するためにそこにあるものについていくつかの調査を行い、タブ付きの情報ウィンドウの見栄えの良いソースとして infobubble を考え出しました。既に作成されたインフォバブルに後でタブを追加できるかどうかはわかりません。データベースからxmlに引き出され、次にjavaスクリプトに引き出されてマップに配置されるイベントがいくつかありますが、同じ場所を共有するものもありますが、他の潜在的なマーカーの日付は異なります。マーカーまたは情報ウィンドウには、場所のマーカーがマップに既に存在するかどうかを確認するために反復できる ID がありますか? その場合は、infobubble/infowindow にタブを追加しますか?

それを行う方法だと思います infoBubble.addTab(title, content)が、どのマーカー/インフォバブルに追加するかをどのように知ることができますか?

更新（これは私が持っているコードで、クロムをフリーズしているようです）：

var location_icon = new google.maps.MarkerImage('../images/FAFSA_Logo_icon.png');  
 var map;
 var markersArray= [];
  function load() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(33.961586, -106.008728),
        zoom: 6,
        mapTypeId: 'roadmap'
    });
    var infoBubble = new InfoBubble({maxWidth: 300});


    downloadUrl("../site_parts/mapmysql.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("event_name");
        var address = markers[i].getAttribute("venue_address");
        var city = markers[i].getAttribute("venue_city");
        var state = markers[i].getAttribute("venue_state");
        var zip = markers[i].getAttribute("venue_zip");
        var website = markers[i].getAttribute("venue_website");

        var date = markers[i].getAttribute("event_date");
        var start_time = markers[i].getAttribute("event_start_time");
        var end_time = markers[i].getAttribute("event_end_time");
        var room = markers[i].getAttribute("event_room");
        var cord = markers[i].getAttribute("ec_fname") + " " + markers[i].getAttribute("ec_lname");
        var cord_email = markers[i].getAttribute("ec_email");
        var cord_pnumber = markers[i].getAttribute("ec_pnumber");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("venue_lat")),
            parseFloat(markers[i].getAttribute("venue_lng")));
        var html = "<b>" + name + "</b> <br/>" + address +", "+ city +", "+ state +", "+ zip + "<br/>" +"<b>Date </b> "+ date +"<br/>" +"<b>Time </b> "+ start_time + " - "+ end_time +"<br/>" + "<b>Room </b>" + room + "<br/>"+ "<b> Cordinator </b>" + cord + " " + "<a href='mailto:" + cord_email + "?Subject=FAFSA%20FFA%20Event'>" + cord_email + "</a> " + cord_pnumber;
        var icon =  location_icon;
            for (var i = 0; i < markersArray.length; i++){
                if (markersArray[i].getPosition()=point){
                    addtabFunction(markersArray[i], map, date, html);
                    break;
                } if (i > markersArray.length){continue} else{

            var marker = new google.maps.Marker({map: map, position: point, icon: icon});
                    markersArray.push(marker);
                    bindinfoBubble(marker, map, infoBubble, date, html)
                    break;
                }
            }
        }
    });
  }

function bindinfoBubble(marker, map, infoBubble, date, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoBubble.addTab(date, html)
    infoBubble.open(map, marker);
  });
}

function addtabFunction (marker, map, date, html){
    infoBubble.open(map, marker);
    infoBubble.addTab(date, html);
}

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}
4

2 に答える 2

1

マップ上にマーカーを配置するための緯度経度を含む配列があると想定しています。したがって、問題の可能な解決策は、マーカーを配置するたびに既存のマーカーを含む配列を検索できることです。

マーカーを格納する別の配列を作成し、後でこの配列を検索して、イベント リスナーをアタッチするときにその位置が一致するかどうかを確認しました。以下の例を参照してください。

例 (未テスト)-

var markersArray= [];
for (var i = 0; i < latlngArray.length; i++) { 
   var lat = parseFloat(latlngArray[//some index]);
   var lng = parseFloat(latlngArray[//some index]);
   var pos = new google.maps.LatLng(lat, lng); 
   marker = new google.maps.Marker({ position: pos, map: map });
   markersArray.push(marker);
   if(markersArray[i].getPosition().equals(marker.getPosition()))
   {
     addTab(markersArray[i])
   }
   else
   {
    openBubble(marker);  
   }
}  
function openBubble(currentMarker)                
{
     google.maps.event.addListener(currentMarker, 'click', function() {
       if (!infoBubble.isOpen()) {
       infoBubble.open(map, marker);
       }
     }); 
   }
}
function addTab(existingMarker)
{
     google.maps.event.addListener(existingMarker, 'click', function() {
     infoBubble.addTab(title,content);
     }); 
}
于 2012-12-18T04:53:16.683 に答える
1

マーカーが既に作成されていると仮定すると、以下のようになります。

google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
});

ソース:この例のソースを表示

更新:コードを書くのが少し面倒ですが、以下にアイデアを示します。これはあなたが探しているものですか？

// declare and initialise an array of {marker: <marker>, ib: <infoBubble>} prior

for(var i=0; i<markerArray.length; i++ ) {
    if(markerArray[i].marker is already there) {
        markerArray[i].ib.addTab() // or
        markerArray[i].ib.updateTab()
    } else {
        var newMarker = create new marker()
        var newIB = create new inforBubble()

        infoBubble.addTab()
        google.maps.event.addListener(marker, 'click', function() {
            if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
        }

        markerArray[i].marker = newMarker
        markerArray[i].ib= newIB
   }
});
于 2012-12-17T22:10:47.593 に答える