-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