1

我已经对 API v3 的选项卡进行了一些研究，并提出了 infobubble 作为选项卡式 infowindows 的一个好看的来源。我不是想弄清楚我是否可以稍后将选项卡添加到已创建的信息气泡中。我有几个事件从数据库中提取到 xml，然后到 java 脚本以放在地图上，但有些事件共享相同的位置，但其他潜在标记的日期不同。标记或信息窗口是否具有可以迭代的 ID，以检查地图中某个位置的标记是否已存在？然后如果是这种情况，请在 infobubble/infowindow 中添加一个选项卡？

我认为 infoBubble.addTab(title, content)是这样做的方法，但我怎么知道要将它添加到哪个标记/信息气泡中？

更新（这是我拥有的似乎冻结 chrome 的代码）：

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

假设标记已经创建，下面是你要做的。

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 回答
1

我假设您将拥有一个包含 latlng 的数组，用于在地图上放置标记。因此，对于您的问题，一个可能的解决方案是每次放置标记时都可以搜索具有现有标记的数组。

我创建了另一个存储标记的数组，稍后在附加事件侦听器时搜索该数组以查看其位置是否匹配。请参见下面的示例。

示例（未测试）-

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 回答