Google 地图 - 自定义图标未出现

Question

我编写了一些 JavaScript 来调用信息，并为数据文件“latlngtrunc.js”中的每个条目放置一个带有自定义图标的标记。

latlngtrunc.js 包含“产品”、“结果”、“级别”和“结果”。每个条目的“posn”。有 3 个不同的“级别”，我想将每个级别表示为不同颜色的图标。

使用注释行时，下面的代码可以正常工作：

var marker = new GMarker(posn);

并按预期显示通用标记（无自定义图标）。当我将其替换为：

var marker = new GMarker({map:map, posn:posn, icon:icon.icon, shadow:icon.shadow});

根本不显示任何标记。

两个警报：

alert(icon.icon);
alert(icon.shadow);

正确返回图像网址，因此我非常确定从外部“latlngtrunc.js”文件中正确检索了所有信息。

任何帮助将不胜感激！

<script src="latlngtrunc.js" type="text/javascript"></script>
<script src="markermanager.js"></script>
<script type="text/javascript">
    //<![CDATA[
    var customIcons = {
            risk: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            threat: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            fraud: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
    };
    var map;
    var mgr;
    var allmarkers = [];

    function load() {
            if (GBrowserIsCompatible()) {
                    map = new GMap(document.getElementById("map"));
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GOverviewMapControl());
                    map.setCenter(new GLatLng(57.16, -2.10), 10);
                    map.enableDoubleClickZoom();
                    mgr = new MarkerManager(map, {trackMarkers:true});
                    window.setTimeout(setupOfficeMarkers, 0);
            }
    }

    function setupOfficeMarkers() {
            allmarkers.length = 0;
            for (var i in officeLayer) {
   var layer = officeLayer[i];
                    var markers = [];
                    for (var j in layer["places"]) {
                            var place = layer["places"][j];
                            var product = place["product"];
                            var result = place["result"];
                            var level = place["level"];
                            var posn = new GLatLng(place["posn"][0], place["posn"][1]);
                            var icon = customIcons[level] || {};
                            var marker = createMarker(posn, product, level, result, icon);
                            markers.push(marker);
                            allmarkers.push(marker);
                    }
                    mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
             }
             mgr.refresh();
     }
     function createMarker(posn, product, level, result, icon) {
            alert(icon:icon.icon);

            var marker = new GMarker({map:map, posn:posn, icon:icon.icon, shadow:icon.shadow});
            /**
            var marker = new GMarker(posn);
            **/
                    GEvent.addListener(marker, "click", function() { 
                            var message ="<b>Product: "+ product +"<br>Result: "+ result +"</b>";
                            marker.openInfoWindowHtml(message);
                    });
                    return marker;
    }

    //]]>
</script>

Answer 1

最后的简单解决方案。我需要将“Anchor”属性添加到“var customIcons”中，以便它们显示：

var customIcons = {
            risk: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            },
            threat: {
                    image: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            },
            fraud: {
                    image: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            }
    };

(0,0) 的锚点稍微偏移图像，因此需要摆弄才能正确定位。