我已经搜索了很多关于为Google Maps Api v3创建自定义控件的搜索,我发现其他人使用它作为
Google documentation.
他们创建div并使用JS来设计它,我认为这不是一个好习惯.
我认为这违反了关注点的分离设计原则我的意思是,在JS或HTML中编写CSS代码.
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]);
