谷歌地圖 - 自定義圖標不出現

Question

我已經寫了一些JavaScript來調用數據文件'latlngtrunc.js'中的每個條目的信息和放置帶有自定義圖標的標記。

latlngtrunc.js包含每個條目的'product'，'result'，'level'&'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); 

正確返回圖像的URL，所以我敢肯定，所有的信息被正確地從外部「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

最終的簡單解決方案。我需要爲了他們「錨」屬性添加到「變種customIcons」來顯示：

的（0,0）

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) 
      } 
    }; 

錨偏移圖像稍微等會需要擺弄正確定位。