-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