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

Question

我搜索了很多关于为 Google Maps Api v3 创建自定义控件的信息，我发现其他人将它用作 Google documentation。 他们使用 JS 创建 div 和样式，我认为这不是一个好习惯。 我认为这违反了我的意思是在 JS 或 HTML 中编写 CSS 代码的关注点分离设计原则。

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

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

这是放置 [Zoom] 按钮的代码。

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 文件（Google 地图初始化程序）

  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]);

Answer 2

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

我发现官方Google Maps JavaScript API Custom Control example 相当复杂，我永远不记得位置选项。因此，我创建了一个名为 CONTROL-JS 的 tiny 1.72 KB add-on JS on GitHub 库，它使您能够简单地将自定义内容创建为字符串，例如 var html = "<h1>Hi</h1>" 然后将其传递给名为 control 的对象，其中每个位置都是一个方法（IDE 智能感知提醒您可能的职位）。

所以，在你的情况下，取消 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);
};

/*
control.js v0.1 - Add custom controls to Google Maps with ease
Created by Ron Royston, www.rack.pub
https://github.com/rhroyston/control
License: MIT
control.topCenter.add.(html)
*/
var control=function(){function o(o){this.add=function(T){var t=document.createElement("div");if(t.innerHTML=T,o)switch(o){case"TOP_CENTER":map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;case"TOP_LEFT":map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;case"TOP_RIGHT":map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;case"LEFT_TOP":map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;case"RIGHT_TOP":map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;case"LEFT_CENTER":map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;case"RIGHT_CENTER":map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;case"LEFT_BOTTOM":map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;case"RIGHT_BOTTOM":map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;case"BOTTOM_CENTER":map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;case"BOTTOM_LEFT":map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;case"BOTTOM_RIGHT":map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(t)}else console.log("err")}}var T={};return T.topCenter=new o("TOP_CENTER"),T.topLeft=new o("TOP_LEFT"),T.topRight=new o("TOP_RIGHT"),T.leftTop=new o("LEFT_TOP"),T.rightTop=new o("RIGHT_TOP"),T.leftCenter=new o("LEFT_CENTER"),T.rightCenter=new o("RIGHT_CENTER"),T.leftBottom=new o("LEFT_BOTTOM"),T.rightBottom=new o("RIGHT_BOTTOM"),T.bottomCenter=new o("BOTTOM_CENTER"),T.bottomLeft=new o("BOTTOM_LEFT"),T.bottomRight=new o("BOTTOM_RIGHT"),T}();