[英]Google Maps Infobox capable of displaying JQuery UI Widgets
[英]is it possible to use jquery-ui-timepicker in infobox of google maps
首先,我本人对Java脚本以及jquery还是陌生的。我要完成一个任务,即在Google地图中,当我们单击特定区域(多边形,圆形)时,需要以某些样式打开信息窗口。因此,我转到了信息框并添加了一些css(jQuery自定义css ui亮度)。在该信息框中,我需要显示日历与时间。所以我做了很多RD和编写的代码
我通过使用绘图工具,信息框,jquery自定义css,jquery-ui-timepicker编写了代码
现在我的问题是jquery-ui-timepicker不在infobox中引发。 如果我在正常的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:
地图加载时会以动态方式创建InfoBox,因此“ $(“。datetimepicker”)'将无法找到您的div。 尝试使用'$(“ body”)。find(“。datetimepicker”)'。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.