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文件构建标记

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

试试这个。您需要在closeInfoBox函数之外指定的数组和load，否则您每次都会继续重置数组。

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 InfoWindow不同，它们在点击其他标记时不会自动关闭

这对我来说很新，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);
  });
}

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

更新

旧帖子

2 个答案: