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

Question

更新

我在此处添加了错误，因为它更易于阅读。以下是我现在通过该更新得到的错误。 PS它应该是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，其中自定义标记是使用自定义 DB 构建的 XML 文件生成的。我已经在下面发布了我的代码，这一切都有效，唯一的事情是我现在已经内置了 Infobox 插件，这让我可以更好地控制标记样式的样式。但是，与 Google InfoWindow 不同，它们不会在单击另一个标记时自动关闭。

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

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

但这只会给我带来错误，要么我没有正确复制此代码，要么我为地图设置的差异足以使此代码无法工作（我不认为是这种情况）。我认为这是我做的不对。现在就代码而言，它的这一行不想工作，

        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();
  }
}

然后你需要将信息框推送到绑定函数中的数组中：

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);
  });

}

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

Answer 2

但是，与 Google 信息窗口不同，当点击另一个标记时，它们不会自动关闭

这对我来说是新的，google.maps.InfoWindow 永远不会自动关闭。

当您只想打开一个 InfoBox 时，只对所有标记使用一个 InfoBox 实例：

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
     //create a Infobox that will be used by each marker
    if(!this.getMap().get('ib')){this.getMap().set('ib',new InfoBox());}
    var ib = this.getMap().get('ib');
    ib.setOptions(myOptions);
    ib.open(this.getMap(),this);
  });
}