2009-11-14 120 views
0

我想添加一個透明PNG到谷歌地圖,而不是使用默認圖標。在我的示例代碼中,我將默認圖標更改爲名爲transparent.png的png?谷歌地圖隱藏標記(和信息),並只顯示當你點擊一個有信息的區域

謝謝!

function onLoad() { 
     map = new GMap(document.getElementById("div_map")); 
     map.addControl(new GSmallMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.setCenter(new GLatLng(54, -3), 5); 

     getMarkers(); 

     GEvent.addListener(map, "click", function(overlay, point) { 
      if (overlay){ // marker clicked 
       overlay.openInfoWindowHtml(overlay.infowindow); // open InfoWindow 
      } else if (point) { // background clicked 

      } 
     }); 
    } 

    function getMarkers(){ 
     var urlstr="read.php"; 
     var request = GXmlHttp.create(); 
     request.open('GET', urlstr , true); // request XML from PHP with AJAX call 
     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       var xmlDoc = request.responseXML; 
       locations = xmlDoc.documentElement.getElementsByTagName("location"); 
       markers = []; 
       if (locations.length){ 
        for (var i = 0; i < locations.length; i++) { // cycle thru locations 
         markers[i] = new GMarker(new GLatLng(locations[i].getAttribute("lat"),locations[i].getAttribute("lng"))); 
         // Add attributes to the marker so we can poll them later. 
         // When clicked, an overlay will have these properties. 
         markers[i].infowindow = "This is "+locations[i].getAttribute("name"); 

         // Useful things to store on a marker (Not needed for this example, could be removed) 
         // Tells you what index in the markers[] array an overlay is 
         markers[i].markerindex = i; 
         // Store the location_id of the location the marker represents. 
         // Very useful to know the true id of a marker, you could then make 
         // AJAX calls to the database to update the information if you had it's location_id 
         markers[i].db_id = locations[i].getAttribute("location_id"); 

         map.addOverlay(markers[i]); 

        } 
       } 
      } 
     } 
     request.send(null); 
    } 

回答

0

您可以使用幾乎看不見的PNG文件作爲一個正常的GIcon.image標記,你只需要小心,有什麼東西,這不是100%透明被用作點擊目標。這可以是GIcon.image或GIcon.transparent。某些瀏覽器不處理對100%透明的對象的點擊。

這種方法的一個問題是可點擊區域會隨着縮放級別的變化而變化。另一種方法是繪製不可見的可點擊多邊形來標記有信息的區域。在這種情況下,多邊形可以是100%透明的,因爲API不依賴於瀏覽器檢測多邊形是否被點擊。