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

前端之家收集整理的这篇文章主要介绍了javascript – 自定义控制Google Maps API v3的最佳实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经搜索了很多关于为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文件(谷歌地图初始化程序)

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

解决方法

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

这应该工作:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);
原文链接:https://www.f2er.com/js/155810.html

猜你在找的JavaScript相关文章