변경 이벤트가 발생하면 Google지도에서 다른 아이콘을 가져올 수 없습니다.

Question

Google API V3을 처음 사용합니다. Zoom on Icon 이벤트를 변경하고 싶습니다. 전체 코드가 예상대로 실행 중입니다.지도 변경 이벤트가 줌의 변경을 캡처하여 아이콘에서 Google 표준 빨간색 아이콘으로 변경할 수있는 마지막 비트입니다. 검토하고 제안 사항을 수정하십시오. 정말 고마워요.

<script type="text/javascript" src="util.js"></script> 
<script type="text/javascript"> 
    var infowindow; 
    var map; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(20, 0); 
    var myOptions = { 
    zoom: 3, 
    panControl:true, 
    zoomControl:true, 
    mapTypeControl:true, 
    scaleControl:true, 
    streetViewControl:true, 
    overviewMapControl:true, 
    rotateControl:true,  
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
downloadUrl("worldcities.xml", function(data) { 
    var markers = data.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
           parseFloat(markers[i].getAttribute("lng"))); 
var circleOptions = { 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.65, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.25, 
    map: map, 
    center: latlng, 
    radius: parseInt(markers[i].getAttribute("population"))/25 
    }; 

    var marker = createMarker(markers[i].getAttribute("name"), latlng,   markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region")); 
var onekmcircle = new google.maps.Circle(circleOptions); 
} 
}); 
} 

function createMarker(name, latlng, popl, cntry, rgon) { 
    var marker = new google.maps.Marker({ 
position: latlng, 
map: map, 
icon: { 
    path: google.maps.SymbolPath.CIRCLE, 
scale: 2 

    }, 
title: name}); 
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon; 


google.maps.event.addListener(marker, "click", function() { 
    if (infowindow) infowindow.close(); 
    infowindow = new google.maps.InfoWindow({content: contentstring}); 
    infowindow.open(map, marker); 
    var zoomLevel = map.getZoom(); 
    map.setCenter(marker.getPosition()); 
    if (zoomLevel<6) 
{ 
    map.setZoom(6); 

} 

}); 



return marker; 
} 

google.maps.event.addListener(map, 'zoom_changed', function() { 

var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png'; 
var icon = google.maps.MarkerImage(url); 
var currentZoom = map.getZoom(); 
    if (currentZoom >9){ 
for(i=0; i< markers.length; i++) { 
    markers[i].setIcon(icon); 

    } 
} 
}); 

Answer 1

여기 있습니다 ... 코드를 수정했습니다 ... 몇 가지 오류가있었습니다. 가장 큰 것은 생성 한 마커를 배열에 저장하지 않아서 이벤트 리스너를 반복하는 것입니다.

gMarkers 배열을 추가했습니다. 귀하의 사이트의 콘솔에서 코드를 실행했는데 성공했습니다. 궁금한 점이 있으면 알려주세요.

var infowindow; 
var map; 
var gMarkers=[]; 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(20, 0); 
    var myOptions = { 
     zoom: 3, 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true,  
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    downloadUrl("worldcities.xml", function(data) { 
     markers = data.documentElement.getElementsByTagName("marker"); 
    }); 

    for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng"))); 
     var circleOptions = { 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.65, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.25, 
      map: map, 
      center: latlng, 
      radius: parseInt(markers[i].getAttribute("population"))/25 
     }; 

     gMarkers.push(createMarker(markers[i].getAttribute("name"), latlng,markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region"))); 
     var onekmcircle = new google.maps.Circle(circleOptions);  
    } 


    google.maps.event.addListener(map, 'zoom_changed', function() { 
     var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png'; 
     var icon = google.maps.MarkerImage(url); 
     var currentZoom = map.getZoom(); 
      if (currentZoom >9){ 
      for(var i=0; i< gMarkers.length; i++) { 
       gMarkers[i].setIcon(icon); 
      } 
      }else{ 
       for(var i=0; i< gMarkers.length; i++) { 
        gMarkers[i].setIcon({path: google.maps.SymbolPath.CIRCLE,scale: 2}); 
       } 
      } 
    }); 

} 


function createMarker(name, latlng, popl, cntry, rgon) { 
    marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 2 

     }, 
     title: name 
    }); 

    var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon; 

    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({content: contentstring}); 
     infowindow.open(map, marker); 
     var zoomLevel = map.getZoom(); 
     map.setCenter(marker.getPosition()); 
     if (zoomLevel<6){ 
      map.setZoom(6); 
     } 
    }); 

    return marker; 
} 

Answer 2

google.maps.event.addListener(marker,\'mouseover\', function() { 
    marker.setIcon("fileadmin/new_templates/images/home_map_notification_hover.png"); 
    $.ajax({ 
    type: "POST", 
    async : false, 
    data: \'address=\'+add , 
    success: function(html){ 

      infowindow.setContent(html); 
      infowindow.open(map,marker); 
     }, 
    }); 
}); 
// On Mouse out 
google.maps.event.addListener(infowindow, \'mouseout\', function() { 
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png"); 
}); 
// On Infowindow close 
google.maps.event.addListener(infowindow, \'closeclick\', function() { 
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png"); 
});