小编Nou*_*oud的帖子

我搜索过很多关于为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 = …

我在CoffeeScript中有这个功能

render: -> 
_.each @$elements, ($el) =>
  if $el[0].id is 'tabs-div'
    emptySlate = "<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>"
    @setEmptyPlacholde($el, emptySlate)
    return 

  @setEmptyPlacholde($el)


setEmptyPlacholde: ($el, emptySlate)->
emptySlateHTML = emptySlate or "<h3 class='js-empty-slate'>no data available</h3>"
if $el.hasClass('mobile-os-con') or 
   $el.hasClass('time-of-visit-con') or 
   $el.hasClass('gender-visit-con') or 
   $el.hasClass('time-redemption-sales-con') or 
   $el.hasClass('gender-redemption-con')

  $el.children().hide()
else
  $el.empty()
$el.append emptySlateHTML 

$ elements是一个jQuery变量,它使用如下数组:

$elements: [
$("#tabs-div")
$("#visits-male")
$("#visits-female")
$("#days-of-visits")
$(".time-of-visit-con")
]

当我使用RequireJS优化器时r.js,它使用Uglify生成的缩小代码..看起来像这样:

render:function(){var e=this;return _.each(this.$elements,function(t){var n;if(t[0].id==="tabs-div"){n="<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>",e.setEmptyPlacholde(t,n);return}return e.setEmptyPlacholde(t)})}

在之前的缩小代码中,$el变成了t..所以这拒绝$el在生产中执行as jQuery元素. …