0

我已经开始使用本教程将自定义控件添加到 GMaps v3 地图：

https://developers.google.com/maps/documentation/javascript/controls?hl=fr#CustomControls

最后一个示例特别演示了如何使用控件保存状态。我有两个控件，它们应该协同工作，当单击控件 A 时，它应该明显地变为粗体文本，控件 B 变为普通文本，当单击 B 时，控件 A 被重置。我试图通过保存状态来做到这一点，在这种情况下是按钮的“选定”状态，但我不确定下一步该去哪里重置按钮集中未选择的按钮，更改按钮字体重量， ETC。

简而言之，我试图重现一个与本机地图类型选择器按钮具有相同行为的按钮集。

有关如何最好地解决此问题的任何教程或指示？我将重新发布上面链接示例中的代码，因为我的基本相同，除了我的属性被称为selected_.

// Define a property to hold the Home state.
CustomControl.prototype.selected_ = null;

// Define setters and getters for this property.
CustomControl.prototype.getSelected = function() {
  return this.selected_;
}

CustomControl.prototype.setSelected = function(selected) {
  this.selected_ = selected;
}

function CustomControl(map, div, selected) {

  // Get the control DIV. We'll attach our control UI to this DIV.
  var controlDiv = div;

  // We set up a variable for the 'this' keyword since we're adding event
  // listeners later and 'this' will be out of scope.
  var control = this;

  // Set the home property upon construction.
  control.selected_ = selected;

  // styling removed //

  // Setup the click event listener
  google.maps.event.addDomListener(setSelectedUI, 'click', function() {
    control.setSelected(true);
  });
}

在尝试使用按钮存储选定状态时，我是否会以完全错误的方式来解决这个问题？

4

1 回答 1

0

您可以迭代所有控件（在给定的 controlPosition 处），比较当前节点是否为选定节点，并修改样式

示例（将给selected活动控件一个类名“”并清除其他控件的类名，因此您可以使用全局样式表来应用样式）

google.maps.event.addDomListener(setSelectedUI, 'click', function() {
        var _this=this;
          map.controls[google.maps.ControlPosition.TOP_RIGHT]
               .forEach(function(node){
            node.className=(node==_this.parentNode)?'selected':''
          });
          /* proceed with  your control-action*/
        });

我不确定setSelectedUI您的代码中有什么，但您必须将第一个参数设置为函数中addDomListener的对象，该参数与链接示例中的含义相同controlUI。

于 2013-01-12T14:02:52.933 回答