Question

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

latlngtrunc.js包含'product'，'result'，'level'＆amp;每个条目'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）的锚点略微偏移图像，因此需要摆弄以正确定位。

谷歌地图 - 没有出现自定义图标

1 个答案: