Google Map Marker 未在首页加载时显示，但在刷新时显示答案

【问题标题】：Google Map Marker not showing up on first page load, but appears on refreshGoogle Map Marker 未在首页加载时显示，但在刷新时显示
【发布时间】：2011-01-01 03:12:15
【问题描述】：

我在地图上显示不同的标记，问题是有时（特别是当我重置网络服务器时）地图加载正确，它甚至显示点的阴影，但标记没有显示/不可见地图。但是在随后的调用中，标记会正确显示（可能是缓存的，但不确定）。此行为在所有浏览器（即 IE 6/7/8、Chrome、Firfox 3.5.6）中都是一致的。

下面显示的 javascript 创建了标记。另一方面，由于标记可以有不同的尺寸，我需要先确定宽度和尺寸（否则它们看起来会变形）。

var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image

point = new GLatLng(parseFloat(latitude), parseFloat(longitude));
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = groupMarkerUrl;
icon.iconSize = new GSize(imgTemp.width, imgTemp.height); //Width x Height
icon.iconAnchor = new GPoint(14, 15);
icon.infoWindowAnchor = new GPoint(5, 1);
marker = new GMarker(point, icon);
map.setCenter(point, 13);

//build the information box
var htmlContent = "<div style=\"color:#000000\"><span style=\"font-weight:bold;\">" + title + "</span><br/>";
if (address != "") {
    htmlContent += address + " ";
}
if (zipcode != "") {
    htmlContent += "<br/>" + zipcode + ", ";
}
if (city != "") {
    htmlContent += city;
}
if (telephone != "") {
    htmlContent += "<br/>Tel : " + telephone;
}
if (fax != "") {
    htmlContent += "<br/>Fax : " + fax;
}

htmlContent += "</div>";

map.addOverlay(marker);

markerKeys.push(stamp);

markers[stamp] = marker;
//Add legends with group markers one for each group
if (null == legends[groupId]) {

    legends[groupId] = groupMarkerUrl;
    var nbsp = document.createTextNode("  ");
    var image = document.createElement("img");
    image.setAttribute("src", groupMarkerUrl);
    image.setAttribute("style", "margin-left:10px !important; border:\"0\";");

    pushpinPnlConsole.appendChild(nbsp);
    pushpinPnlConsole.appendChild(image);

    pushpinPnlConsole.setAttribute("style", "display:block");

}

eval("GEvent.addListener(markers[stamp] , \"click\", function(){markers['" + stamp + "'].openInfoWindowHtml(windowHtmls['" + stamp + "']);});");
windowHtmls[stamp] = htmlContent;
opticianTBody.appendChild(row);

谢谢。

【问题讨论】：

标签： google-maps google-maps-markers

【解决方案1】：

你的问题是

  imgTemp.src = groupMarkerUrl; //url to the actual image

需要一些时间才能完成。由于您使用 imgTemp.width 和 imgTemp.height 而不等待图像加载，因此这些值可能为零。 API 将以零大小绘制您的图标。

在 MSIE 以外的浏览器中，您可以省略 icon.iconSize（并且不要像 mopoke 提到的那样从 G_DEFAULT_ICON 复制详细信息），如果图像在标记显示时已经到达，则标记将默认为图像大小.在 MSIE 中，对于 PNG 图像，API 使用 AplphaImageLoader，如果未指定大小，则默认大小为零。

解决方法是通过将此代码内联来正确预加载您的图像，以便在 onload 事件之前执行它

var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image

并将你的图标创建代码放在一个 onload 函数中，这样它就不会被执行，直到内联代码加载的所有图像都被完全获取。

【讨论】：

我已经更新了代码并且仍在测试它。但我认为，如果我把它放到某种条件下，它会好得多。 imgTemp.onLoad = function() { icon.iconSize = new GSize(imgTemp.width, imgTemp.height); } -- 使用循环确保图像已加载。 var imgLoaded = 假； while (imgLoaded == false) { imgTemp.onLoad = function() { icon.iconSize = new GSize(imgTemp.width, imgTemp.height); imgLoaded = true; } }

【解决方案2】：

不确定你为什么在构造函数中使用G_DEFAULT_ICON。

要做一个自定义图标，使用类似的东西：

var icon = new GIcon();
icon.image = groupMarkerUrl;
//...

重置服务器并尝试加载groupMarkerUrl 中引用的图像后，您是否正确看到它？

【讨论】：