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

Question

我已经搜索了很多关于为Google Maps Api v3创建自定义控件的搜索，我发现其他人将其用作 Google documentation。 他们创建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文件（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 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);
};

＆＃13;

＆＃13;

/*
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}();

＆＃13;

＆＃13;

＆＃13;