Google지도 API 서클 아이콘

Question

Google지도 API와 빨간색 점 아이콘 (일명 지진 아이콘)을 사용하여지도를 만들려고합니다.

몇 가지 위치와 몇 가지 크기가 있습니다. 일부 크기가 더 낮으므로 빨간색 점 아이콘이 일부 위치에만 적용되므로 잘 보이지 않습니다.

var marker1; 
var marker2 
for (var i = 0; i < locations.length; i++) { 

    if (locations[i][3] > 5){ 
     alert("I am in");} 
     marker1 = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      icon: getCircle(locations[i][3]) 
     }); 
    if(locations[i][3] < 5){ 
     marker2 = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      animation: google.maps.Animation.BOUNCE 
     }); 
    } 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker1); 
    } 
    })(marker1, i)); 
} 

문제는 marker1에 있습니다. 크기를 5보다 큰 위치로 마커를 제한하려고하면 단일 아이콘이 디자인되지 않고 경고가 트리거되지 않습니다.

하지만 "if"문 (예와 같이)에서 marker1의 코드를 제거하면 경고가 표시되고 아이콘이지도에 표시됩니다.

마커 2는 문제없이 필터링 될 수 있습니다.

왜 이렇게 작동합니까? 나는 단지 아래의 몇 줄을 단순히 "}"로 옮깁니다. 내가 이해할 수없는.

도움 주셔서 감사합니다.

Answer 1

코드는 매우 복잡하며 두 개의 글로벌 marker1 및 marker2 변수를 사용하는 방식으로는 원하는 모든 작업을 수행 할 수 없습니다.

나는 그것이 무엇인지 완전히 알지 못합니다. do 코드가 필요하지만 올바른 방향으로 나아갈 수있는 코드를 훨씬 더 깨끗하게 보여줄 수 있습니까? 주목할만한

for(var i = 0; i < locations.length; i++) { 
    addMarker(locations[i]); 
} 

function addMarker(location) { 
    var lat = location[1], lng = location[2], 
     magnitude = location[3], content = location[0]; 

    var options = { 
     position: new google.maps.LatLng(lat, lng), 
     map: map 
    }; 

    if(magnitude > 5) { 
     options.icon = getCircle(magnitude); 
    } 
    else { 
     options.animation = google.maps.Animation.BOUNCE; 
    } 

    var marker = new google.maps.Marker(options); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(content); 
     infowindow.open(map, marker); 
    }); 
} 

차이 :

• 전역 marker1 및 marker2 변수. 대신 모든 표식에는 고유 한 변수가 있습니다.
• addMarker() 메서드를 호출하면 복잡한 함수를 반환하는 대신에 필요한 closure가 만들어집니다.
• 더 읽기 쉽도록 모든 locations[i][n] 속성에 명명 된 변수를 사용합니다.
• 크기가 정확히 5 인 경우를 처리합니다. 원래 코드는 건너 뜁니다. 필요한 경우 > 5에서 >= 5으로 변경하십시오.
• 두 번의 반복을 피하기 위해 두 개의 google.maps.Marker() 호출을 결합하십시오.

그게 무슨 일이 일어나고 있는지 알아내는 것이 더 쉽게 할 수 있기를 바랍니다.