将jQuery应用于Google Maps控件中的HtmlDivElement对象

Applying jQuery to an HtmlDivElement object in a Google Maps control

本文关键字：HtmlDivElement 对象 控件 Maps jQuery 应用于 Google      更新时间：2023-09-26

我正试图使用jQuery UI的buttonset()函数在Google Maps v3中创建一个地图图例。我想以编程方式创建div标记，所以我的代码看起来像

var legend = document.createElement("div");
var input = document.createElement("input");
var label = document.createElement("label");
input.setAttribute("type", "checkbox");
input.setAttribute("id", "label");
label.setAttribute("for", "label");
label.innerHTML = "label";
input.appendChild(label);
legend.appendChild(input);
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(legend)
$(legend).buttonset()

但是，如果没有最后一行，我会得到一个复选框，但当我添加最后一行时，复选框就会消失。有没有一种方法可以让我在谷歌地图中使用jQuery UI？或者我需要用纯Javascript写它吗？

事实证明，我对一些函数调用的排序不正确。。。以下是我将代码更改为的内容。

var legendWrap = document.createElement("div");
var legend = document.createElement("div");
var input = document.createElement("input");
var label = document.createElement("label");
input.setAttribute("type", "checkbox");
input.setAttribute("id", "label");
label.setAttribute("for", "label");
label.innerHTML = "label";
input.appendChild(label);
legend.appendChild(input);
$(legend).buttonset() // <--- need to call buttonset() before appending 
                      //      it to the wrapped div
legendWrap.appendChild(legend) 
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(legendWrap)
                      // append the wrapped div instead
相关文章：