2012-09-09 36 views
0

我有这段代码,我试图切换一些kml图层。问题是,当我点击标记时,它没有显示infowindow。切换KML图层,Infowindow不工作

也许有人可以告诉我我的错误。

这里是代码:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false"> 
    </script> 
    <script type="text/javascript"> 

var map; 

// lets define some vars to make things easier later 

var kml = { 
    a: { 
     name: "Productores", 
     url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" 
    } 

// keep adding more if you like 
}; 

// initialize our goo 

function initializeMap() { 
    var options = { 
     center: new google.maps.LatLng(13.324182,-87.080071), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    createTogglers(); 
}; 


google.maps.event.addDomListener(window, 'load', initializeMap); 



// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) { 



if (checked) { 

     var layer = new google.maps.KmlLayer(kml[id].url, { 
      preserveViewport: true, 
      suppressInfoWindows: true 
     }); 
     // store kml as obj 
     kml[id].obj = layer; 
     kml[id].obj.setMap(map); 
    } 
    else { 
     kml[id].obj.setMap(null); 
     delete kml[id].obj; 
    } 

}; 

// create the controls dynamically because it's easier, really 
function createTogglers() { 

    var html = "<form><ul>"; 
    for (var prop in kml) { 
     html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + 
     " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + 
     kml[prop].name + "<\/li>"; 
    } 
    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + 
    "Remove all layers<\/a><\/li>" + 
    "<\/ul><\/form>"; 

    document.getElementById("toggle_box").innerHTML = html; 
}; 


function removeAll() { 
    for (var prop in kml) { 
     if (kml[prop].obj) { 
      kml[prop].obj.setMap(null); 
      delete kml[prop].obj; 
     } 

    } 
}; 


// Append Class on Select 

function highlight(box, listitem) { 
    var selected = 'selected'; 
    var normal = 'normal'; 
    document.getElementById(listitem).className = (box.checked ? selected: normal); 
}; 

</script> 

<style type="text/css"> 
.selected { font-weight: bold; } 
</style> 

</head> 
<body> 
<div id="map_canvas" style="width: 50%; height: 200px;"></div> 
<div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div> 
</body> 
</html> 

回答