我正在创建 Google Maps Mashup。在我尝试将 JQuery 选项卡传递到我的信息窗口之前,一切似乎都运行良好。基本上,我正在做的是:
- 创建地图
- 复选框的 Onclick 事件
- 创建标记
- 创建信息窗口
- 调用自定义函数为信息窗口生成 HTML(在这个自定义函数中,我给 HTML 元素一个唯一的名称)
- 然后我尝试调用 JQuery 函数来启动选项卡
这就是问题出现的地方。我收到 javascript 错误“无法读取未定义的属性 _ e3 ”。我确实尝试在创建信息窗口后调用自定义函数,但这没有帮助(尽管这是出现 JS 问题的地方)
我的代码如下:
var map;
var mouseInfowindow;
var infowindow;
var bounds;
var infoWindow = new google.maps.InfoWindow;
var markers = [];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-33.924868, 18.424055),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
zoomControl: true,
panControl: true,
mapTypeControl: true,
zoom: 12,
zoomControlOptions: { 'style': google.maps.ZoomControlStyle.LARGE, 'position': google.maps.ControlPosition.RIGHT_BOTTOM },
panControlOptions: { 'style': google.maps.ZoomControlStyle.LARGE, 'position': google.maps.ControlPosition.RIGHT_BOTTOM },
mapTypeControlOptions: { 'style': google.maps.MapTypeControlStyle.DROPDOWN_MENU, 'position': google.maps.ControlPosition.RIGHT_BOTTOM }
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
devcs = [];
for (var i = 0; i < unitsArr.length; i++) {
var unit = unitsArr[i];
var marker = createMarker(unit[0], unit[1], unit[2], unit[3], unit[4], unit[5]);
devcs[i] = marker;
mymarker = marker;
myLat = unit[2];
myLng = unit[3];
}
//ShowClock();
}
function createMarker(a, b, c, d, e, f, g, h , i, j)
{
// Hide the Marker and InfoWindow if the checkbox was unchecked
if (j.checked == false)
{
hideMarker(a);
}
else
{
// If the marker was created previously, simply show it (i.e. do not recreate it)
if (show(a) == '0')
{
// Create new marker that has not already been added to the page
var location = new google.maps.LatLng(c, d);
var marker = new google.maps.Marker({
position: location,
icon: e,
animation: google.maps.Animation.DROP,
map: map,
id: a
});
marker.setTitle(b);
map.panTo(location);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
if(infowindow) {
infowindow.close();
}
var contentString = buildInfoWindowContent(a, b, c, d, e, f);
infoWindow.setContent(htmlEscape(contentString));
infoWindow.open(map,marker);
google.maps.event.addListener(infowindow, 'domready', function () {
$("#tab-panel-1234").tabs();
});
});
}
}
}
function buildInfoWindowContent(a, b, c, d, e, f)
{
var returnString = '<div class="infobox-wrapper">' +
' <div class="container_12" id="infobox" style="height:240px;overflow-y:auto;">' +
' <div class="grid_12">' +
' <div class="block-border" id="tab-panel-1234" style="width:610px;">' +
' <div class="block-header">' +
' <h1 id="MainTabTitle">' + b + '</h1>' +
' <ul class="tabs">' +
' <li><a href="#tab-1" id="TabOneHeader">Current</a></li>' +
' <li><a href="#tab-2" id="TabTwoHeader">Trails</a></li>' +
' <li><a href="#tab-3" id="TabThreeHeader">Download</a></li>' +
' </ul>' +
' </div>' +
' <div class="block-content tab-container" style="padding-top:10px; padding-bottom:10px;">' +
' <div id="tab-1" class="tab-content">' +
f +
' </div>' +
' <div id="tab-2" class="tab-content">' +
' <table style="width:100%;" cellpadding="4" cellspacing="0">' +
' <tr>' +
' <td></td>' +
' <td></td>' +
' </tr>' +
' <tr>' +
' <td></td>' +
' <td></td>' +
' </tr>' +
' </table>' +
' </div>' +
' <div id="tab-3" class="tab-content">' +
' <p>' +
' </p>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div> ' ;
return returnString;
}
任何帮助将不胜感激!!