我使用 google Maps Api v3 使用 ajax 调用在 colorbox 内渲染 google 地图。
这是我用作地图和其他一些东西的容器的 div，它将显示在颜色框中，也将调用 witch click ajax 上的锚：
<div id="cb-js-map-content" style="display: none"></div>
<a href="#cb-js-map-content" id="cb-js-showMap">
Show Map
</a>
我使用 ajax 在 witch 中检索文档是地图标记和将生成地图的 js 函数。这是 ajax 调用和颜色框初始化：
FSM.mapAjaxCall = {
GetMap: function () {
$("#cb-js-showMap").click(function () {
$.ajax({
url: //my ajax url
cache: false,
dataType: 'json',
success: function (data, status) {
var target = $("#cb-js-map-content");
target.append(data.Html);
if (typeof (data.Javascript) === "undefined") {
return;
}
$.loadScript(data.Javascript);
}
});
$("#cb-js-map-content").show();
$("#cb-js-showMap").colorbox({
inline: true,
height: colorboxHeight,
width: colorboxWidth,
onClosed: function () {
$("#cb-js-map-content").hide();
}
});
});
}
};
这是加载地图的 div
<div class="inlineClass" id="cb-js-mainMap" style="width:1023px; height: 800px; display:block"></div>
使用这个js函数：
initializeMap = function () {
var mapOptions = {
center: centerLatlng,
zoom: 8,
minZoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("cb-js-mainMap"), mapOptions);
//Add event for zoom changed and store data for map center
google.maps.event.addListener(map, 'zoom_changed', function () {
//listener code
});
google.maps.event.trigger(map, 'resize');
}
现在我的问题是这个设置几乎总是在 Firefox 上有效，而在 Chrome 中很少。这是有问题的屏幕的样子：
关闭颜色框弹出窗口有时可以解决此问题。