javascript - 带有自定义标记的 Google Maps V3，使用自定义信息框，一次只显示一个？

Question

更新

我在此处添加了错误，因为它更易于阅读。以下是我现在通过该更新得到的错误。 P.S 它应该是 InfoBox 而不是 Infobox，我想我在输入时在某处犯了这个错误 :)。那么我现在哪里出错了？我什至不确定这条错误消息在说什么:

          Uncaught TypeError: Cannot read property 'style' of null
            InfoBox.setBoxStyle_
            InfoBox.setOptions
            (anonymous function) PAGE.php:101
            N.trigger main.js:23
            xK.(anonymous function).e
            (anonymous function)
            N.trigger main.js:23
            F.ie
            F.sm
            (anonymous function) main.js:11
            N.trigger main.js:23
            F.Jk
            (anonymous function)

旧帖

我有一个自定义的 Google Maps V3，其中包含使用自定义数据库构建的 XML 文件生成的自定义标记。我已经在下面发布了我的代码，这一切都有效，唯一的问题是我现在已经内置了 Infobox 插件，这让我可以更好地控制标记样式的样式。然而，与 Google InfoWindow 不同的是，它们不会在单击另一个标记时自动关闭。

这是我的加载函数，它使用我的 XML 文件设置 map 和构建标记，

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(54.500, 355.000),
    zoom: 5,
    mapTypeId: 'roadmap'
  });

  downloadUrl("genxml.php?id=<?php echo $VarToUse ?>",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("name");
      var number = markers[i].getAttribute("number");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
      var myOptions = {
        content: "<b class=\"infoBox_links\"><a href=\"search.php?BoxID=" + number + "\">" + name + "</a></b> <br/>" + address
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-90, -125)
        ,zIndex: null
        ,boxStyle: { 
           background: "#FFFFFF",
           border: "1px solid grey",
           width: "170px",
           height: "70px",
           padding: "8px",
           fontSize: "12px",
           overflow: "hidden"
         }
        ,closeBoxMargin: "-5px"
        ,closeBoxURL: "imgs/x_google.png"
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
      };
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, myOptions); //function call to set the markers!
    }
  });
} //End of function load()

如您所见，我有一个在加载过程中调用的函数，这是我当前的代码，运行良好

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
    var ib = new InfoBox(myOptions);
    ib.open(map, marker);
  });
} //End of bindInfoWindow function!!

这有效，生成了具有我需要的样式的自定义信息框，但是当单击新标记时，当前“打开”的信息框不会关闭。从其他人的许多不同尝试和想法中，我目前正在与:

function bindInfoWindow(marker, map, myOptions) {

  var ibs = [];

  var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
  }

  var ibIndex = ibs.push(new Infobox()) - 1,
    ib = ibs[ibIndex];

  google.maps.event.addListener(marker, 'click', function() {
        closeInfoBox();
        ib.setOptions(myOptions);
        //var ib = new InfoBox(myOptions);
        ib.open(map, marker);
  });
}

此代码来自Opening only a infobox at a time when multiple markers are displayed on the map

然而，这只会给我带来错误，要么是我没有正确复制这段代码，要么是我的 map 设置不同，以至于这段代码无法正常工作(我认为情况并非如此)。我认为这是我做得不对的地方。现在就代码而言，它的这一行不想工作，

        var ibIndex = ibs.push(new Infobox()) - 1,

在控制台日志中返回

        Uncaught ReferenceError: Infobox is not defined PAGE.php:101
        bindInfoWindow PAGE.php:101
        (anonymous function) PAGE.php:84
        request.onreadystatechange

欢迎所有想法，

非常感谢

格伦。

Answer 1

试试这个。您需要在 load 函数之外指定数组和 closeInfoBox，否则您每次都只是不断地重置数组。

var ibs = [];

function closeInfoBox() {
  for (var i in ibs) {
    ibs[i].close();
  }
}

然后您需要将信息框推送到绑定(bind)函数中的数组中:

function bindInfoWindow(marker, map, myOptions) {
  var ib = new Infobox(myOptions);
  ibs.push(ib);

  google.maps.event.addListener(marker, 'click', function() {
    closeInfoBox();
    ib.open(map, marker);
  });

}

我还没有对此进行测试，但它与我在代码中不同地方所做的类似。