Google지도 아이콘 관리자

Question

확대/축소 수준에 따라 2 개의 다른 마커가 표시되는 데 문제가 있습니다. 예를 들어, 줌 레벨이 10보다 작 으면 아이콘이 표시되고, 확대 레벨이 10보다 큰 경우 아이콘이 표시됩니다. 2. 마커 관리자를 살펴 봤지만 약간 길을 잃었습니다. 여기에 내 코드입니다 : 당신은 내가 JSON 파일을 보는 바와 같이

var url = "json.api"; 

function initialize() { 

    var myLatlng = new google.maps.LatLng(0, 0); 
    var myOptions = { 
     maxZoom: 16, 
     zoomControl: true, 
     disableDefaultUI: true, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    downloadUrl(url, function(data) { 

     var j = eval('(' + response + ')'); 
     var jlength = j.data.hotels.length; 

     var bounds = new google.maps.LatLngBounds(); 

     for(i=0; i < jlength; i++) { 

      var x = parseFloat(j.data.hotels[i].lat); 
      var y = parseFloat(j.data.hotels[i].lon); 
      var z = new google.maps.LatLng(x,y); 
      var title = j.data.hotels[i].title; 
      var hotel_id = j.data.hotels[i].id; 
      var address = j.data.hotels[i].address; 
      var star = j.data.hotels[i].star; 
      var thumbnail = j.data.hotels[i].thumbnail; 

      var contentstring = 'some html'; 

      var marker = createMarker(); 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentstring 
      }); 

      bounds.extend(z); 

      map.fitBounds(bounds); 

      //NOT SURE IF THESE ARE NEEDED 
      // zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { 
      // google.maps.event.removeListener(zoomChangeBoundsListener); 
      // }); 
      // google.maps.event.addListener(map, 'zoom_changed', function() { 
      // }); 
     }; 

     if (map.getZoom() == 21) {map.setZoom(16);} 

     if (map.getZoom() < 12) {map.setZoom(map.getZoom()+1);} 

     //alert(map.getZoom()) 

     function createMarker(){ 

      var marker = new google.maps.Marker({ 
       position: z, 
       map: map, 
       title: title, 
       html: contentstring, 
       icon: 'icona.png' 
      }); 

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

하는 내가 루프를 통해 위도와 LNG (및 기타 비트)를 얻을 다음 정보 내 JSON 파일에 모든 것을 표시하는 마커를 만들 수 창 등 .... 그냥 createMarker2 두 번째 마커 함수를 만들 수 있습니다 및 일부 호출하는 방법을 확대/축소 10 경우? ... 어떤 도움을 주시면 감사하겠습니다. 필자는 온라인에서 몇 가지 예를 살펴 보았지만 혼란스러워했습니다. 미리 감사드립니다.

Answer 1

중요한 부분을 주석으로 처리했습니다. zoom_changed 이벤트를 수신해야합니다. 이 이벤트 핸들러 안에 있지 않으면 map.getZoom()을 확인해도 아무 것도 수행하지 않습니다.

google.maps.event.addListener(map, 'zoom_changed', function() { 
    // your zoom logic goes here 
    var zoom = map.getZoom(); 
    if (zoom < 10) { 
     // do something 
    } else { 
     // do something else 
    } 
}); 

나는 당신에게 운동의 나머지 부분을 떠날거야 -하지만 아마 당신은 마커의 배열에 각 마커를 추가해야하고, 조건부/전원을 껐다 켜 그 마커를 반복. 하나의 팁 - 루프 할 때 검사하기 위해 실제로 마커 개체에 추가 속성을 추가 할 수 있습니다. 예를 들어 마커를 추가 할 수 있습니다. LessThan10 = true; 마커 개체에. 그런 다음 루핑 할 때 위의 속성을 살펴보고 marker.setVisible();을 호출 할 수 있습니다. 해당되는 경우.

Answer 2

http://www.jslint.com/을 통해 코드를 실행하라는 제안 - 몇 가지 구문 오류가 있습니다 (대부분 후행 ;이 필요하지 않습니다).

response은 어디에서 왔습니까? 이것은 코드에서 참조하는 유일한 장소입니다.

var j = eval('(' + response + ')'); 

initialize 함수 내에 createMarker 함수를 중첩하지 마십시오. 독립적으로 만들고 마커 및 해당 정보 창을 만드는 데 필요한 데이터를 해당 함수에 매개 변수로 전달하십시오.