0

首先是我自己对 java 脚本和 jquery 的新手。当我们点击特定区域（多边形、圆形）时，我有一项任务要完成，即在谷歌地图中，​​需要用一些样式打开一个信息窗口。所以我搬到了信息框并添加了一些css（jquery custom css ui lightness）。在那个信息框中我需要用时间显示日历。所以我做了很多RD和writen代码

我使用绘图工具、信息框、jquery 自定义 css、jquery-ui-timepicker 编写代码

现在我的问题是 jquery-ui-timepicker 没有在信息框中提出。如果我在普通 div 中使用它，它工作正常。

这是我的一些代码：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-timepicker-addon.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({});
    });
</script>

 var contentString =
                 '<table width="100%"' +
                 '<tr>' + '<td width="18%">From Date:</input></td>' + '<td> <input class="datetimepicker" id="start_time" name="start_time" type="text" /></td>' + '<td width="18%" align="center">To Date:</input></td>' + '<td><input class="datetimepicker" id="end_time" name="end_time" type="text" /></td>' + '</tr>' +
                 '</table>'

 function RaiseInfoWindow() {
        google.maps.event.addListener(drawingModesType, 'click', function (event) {
            if (infoBox)
                infoBox.close();
            var bounds = new google.maps.LatLngBounds();
            message = GetMessage(drawingModesType);
            InfoBoxType(InfoBox, message);
            infoBox.setOptions({ content: message });
            infoBox.setPosition(bounds.getCenter());
            infoBox.open(map);
            google.maps.event.addListener(infoBox, 'domready', function () {
                jQuery("#tabs").tabs();
            });
        });
function GetMessage(polygon) {
        coordinates = polygon.getPath().getArray();
        message = ['<div id="tabs">', '<ul>', '<li><a href="#tab-1" ><span>Modify</span></a></li>', '<li><a href="#tab-2"><span>Save</span></a></li>', '</ul>',
           '<div id="tab-1">', '<li><div style="color:#000" class="divText" >Approximately area is ' + GetAreaInAcres(polygon) + ' kms</div></li>', '<div class="divbuttonText"><p><input type="button" value="Edit" title="Edit" class="buttonStyle" onclick="ShapeEditable(true);" />' + "     " + '<input type="button" value="Done" title="Done" class="buttonStyle" onclick="ShapeEditable(false);" />' + "     " + '<input type="button" value="Delete" title="Delete" class="buttonStyle" onclick="DeleteShape(drawingModesType);" /></p></div>', '</div>',
           '<div id="tab-2">', '<p>' + contentString + '</p>', '</div>', '</div>'].join('');
        return message;
    }

更新

JsFiddle 这是我的 Jsfiddle 和我的完整代码（不要以为我生气了。我试图添加脚本 url 但它不起作用。我看到了这么多 jsfiddles（给出了 jquery-ui-timepicker 插件 .js 的示例，那里同样的问题）所以我添加了脚本。我的代码从 2199 行开始。请忽略前面的行）

更新2：

这是我在应用@gaurrav 建议时间选择器后更新的小提琴，但在点击 2 到 3 次后它正在提升

4

1 回答 1

0

InfoBox 是在地图加载时动态创建的，因此 '$(".datetimepicker")' 将无法找到您的 div。尝试使用'$("body").find(".datetimepicker")'。

于 2014-05-09T05:16:24.297 回答