自定义控制Google Maps API v3的最佳实践

Question

我搜索过很多关于为Google Maps Api v3创建自定义控件的内容,我发现其他人将其用作 Google文档.他们创建div并使用JS来设计它,我认为这不是一个好习惯.我认为这违反了关注点的分离设计原则我的意思是,在JS或HTML中编写CSS代码.

除了最佳实践问题,我已尝试从上面的链接中的代码示例,但它不起作用它引发了以下错误:

( **Uncaught TypeError: Cannot read property 'zIndex' of undefined** ) .. 

这是放置[ 缩放 ]按钮的代码.

HTML文件

  <div id="control-div" class="control-div">
  <div id= "control-ui" class="control-ui" title = "Click to set the map to Home">
    <div id="control-text" class="control-text">
      <p> Zoom </p>
    </div>
  </div>
</div>

CSS文件

.control-ui{
  background-color: white;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  text-align: center;
  width: 90px;
  height: 30px;
}
.control-text{
  front-family: Arial,sans-serif;
  font-size: 12px;
  padding: 4px 4px;
}

JS文件(谷歌地图初始化程序)

  var controlDiv =$("#control-div");
  var controlUI = $("#control-ui");
  var controlText = $("#control-text");
  controlUI.click(function() {
    map.setZoom(11);
  });
  controlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

Answer 1

控件应该是一个DOMNode,但是你提供了一个jQuery对象.

这应该工作:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);