-1
我想切换Google地图交通图层。我发现这个职位：Adding Custom Control to Google Map (Adding toggle for traffic layer)将图层添加到Google地图（为交通图层添加切换）
我已经尝试把DOM监听器放到我的代码中的各个地方，没有任何效果。使用Firebug我没有看到任何错误，但流量层不切换。
我能够在流量层进行硬编码，所以我知道它可以工作。
这里是我的代码： Eyehike远足定位 </SCRIPT> - >
<script type="text/javascript">
var m_icon;
var m_shadow;
var mrk_id;
var thumnbnail;
var trafficLayer;
function toggleTraffic(){
if(trafficLayer.getMap() == null){
//traffic layer is disabled.. enable it
trafficLayer.setMap(map);
} else {
//traffic layer is enabled.. disable it
trafficLayer.setMap(null);
}
}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.50, -115.00),
zoom: 6,
mapTypeId: 'hybrid'
}); // The higher the zoom number, the more detailed the map.
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(map);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("marker_php_07_16.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var rank = markers[i].getAttribute("rank");
var mileage = markers[i].getAttribute("mileage");
var permalink = markers[i].getAttribute("permalink");
var photolink = markers[i].getAttribute("photolink");
var routelink = markers[i].getAttribute("routelink");
var image_thumb = markers[i].getAttribute("thumbnail");
if(rank > 0 && rank < 10) {
iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
m_shadow = 'http://www.google.com/mapfiles/shadow50.png';
}
else {
iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
m_shadow = 'http://www.google.com/mapfiles/shadow50.png';
};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: m_icon,
shadow: m_shadow,
title: name,
zIndex: mrk_id,
optimized: false,
html: "<div style='font-size:12px';width: 400px; height: 200px'><b>" + name
+ "</b></br><a href=\"" + photolink + "\" TARGET=blank><img src=\"" + image_thumb + "\" height=108 width=144 vspace=2 border=4 align=left></a>"
+ address
+ '</br>Difficulty (1-5) : '
+ rank
+ '. Mileage: '
+ mileage
+ " miles.</br>Trail review at: "
+ "<a href=\"" + permalink + "\" TARGET=blank>www.eyehike.com</a> <br/>"
+ "<a href=\"" + photolink + "\" TARGET=blank>See pictures of the hike.</a><br/>"
+ "<a href=\"" + routelink + "\" TARGET=blank>Topograhic map.</a>"
+ "</div>"
});
bindInfoWindow(marker, map, infoWindow);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
// google.maps.event.addDomListener(window, 'load', load);
});
trafficLayer = new google.maps.TrafficLayer();
google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onload="load()">
<button id="trafficToggle">Toggle Traffic Layer</button>
<div id="map" style="width: 900px; height: 600px">
</div>
</body>
</html>
我有时间今晚纠正每个我的代码你建议，当然它的作品。我现在第一个错误很明显，那就是你指出了。第二个关于bindinfowindow我需要学习更多，所以我可以更多地了解它是如何工作的。 – Steve