Javascript 谷歌地图API v3自定义控制的最佳实践

我已经搜索了很多关于为GoogleMapsAPIv3创建自定义控件的内容，我发现其他人也在使用它 . 他们创建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>

JS文件（谷歌地图初始值设定项）

---

控件应该是DOMNode，但您提供了一个jQuery对象

这应该起作用：

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

---

您当然希望通过自定义控件将自定义徽标和版权添加到谷歌地图。否则，它们可能无法正确渲染，尤其是在移动设备上

我发现这位官员相当复杂，我永远记不起职位的选择。因此，我创建了一个名为CONTROL-JS的库，它允许您简单地将自定义内容创建为字符串，例如，

var html=“Hi”

，然后将其传递给名为

CONTROL

的对象，其中每个位置都是一个方法（IDE intellisense提醒您可能的位置）

因此，在您的情况下，unsing CONTROL-JS只需

var html = '<p id="control-text"> Zoom </p>'

//Global method that is fired when the API is loaded and ready
function initMap () {
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //intelleSense/Auto-complete works on IDE's
    control.topCenter.add(html);
};

---

@Molle博士最佳实践部分是什么？你能回答吗？当然这只是我自己的观点，但我总是更喜欢通过全局CSS应用样式，而不是通过JS设置样式。特别是对于自定义控件，如果需要独特的样式（通常基于mapType控件的样式），则最好使用全局CSS？它的目的是什么？它定义了控件的顺序。默认情况下，首先将内置控件放置在ControlPosition，然后是自定义控件（按照它们被推入数组的顺序）。根据问题中链接的示例，第一个控件是MapTypeControl（位于地图顶部最右侧）。第二个控件是主控件，位于mapTypeControl的左侧。为

homeControlDiv

定义

索引
0
时，Home控件将是第一个控件，MapTypeControl将放置在Home控件的左侧
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);

var html = '<p id="control-text"> Zoom </p>'

//Global method that is fired when the API is loaded and ready
function initMap () {
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //intelleSense/Auto-complete works on IDE's
    control.topCenter.add(html);
};