이벤트 리스너를 추가하면 Google지도가 고정됩니다.

Question

내 페이지에 마커가있는 Google지도를 만들려고합니다. 각 항목에 위도, 경도 및 제목에 대한 데이터 속성이있는 정렬되지 않은 목록이 있습니다. JQuery를 사용하여 목록의 각 항목에 대해이 값을 가져 와서지도에서 마커를 생성합니다. 지도가 펼쳐지는대로 Google지도가 타일을로드하지 않는다는 점을 제외하면 모든 것이 정상적으로 작동하는 것 같습니다. 내가 maps.event.addListener를 사용했다()와지도가 순간적으로 작동하고 완전히 응답하지 않을 것입니다 전에 - 참고

var map; 
// initialize google map 
$(function() { 
    var myOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng(CoordinatesLat, CoordinatesLong), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    } 
    // initiate map 
    map = new google.maps.Map($("#map")[0], myOptions); 

    // when map is loaded, add events and behaviors to it 
    google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); //commenting this line prevents GMAP problems 
}); 

:

이 내가지도를 초기화하는 방법입니다. maps.event.addListenerOnce()로 변경하면 얼어 붙기가 중지되었지만 여전히 타일 로딩 문제가 있습니다. 이 원인이 될 수있는 것을

//add events from event list to map. add behavior to events ie. mouseover 
function addEventsToMap(selector) { 
    $(selector).each(function (i, $e) { 
     $e = $($e); 
     var latlng; 
     if ($e.attr("data-geo-lat") && $e.attr("data-geo-long")) { 
      latlng = new google.maps.LatLng($e.attr("data-geo-lat"), $e.attr("data-geo-long")); 

      $e.marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: $e.attr("data-title") 
      }); 

      google.maps.event.addListener($e.marker, 'click', function() { window.location = $e.attr("data-href"); }); 
      google.maps.event.addListener($e.marker, 'mouseover', function() { $e.addClass("event-hover"); }); 
      google.maps.event.addListener($e.marker, 'mouseout', function() { $e.removeClass("event-hover"); }); 

      //when mouse hovers over item in list, center map on it's marker 
      $e.mouseenter(function() { 
       map.panTo(latlng); 
      }); 
     } 
    }); 
} 

어떤 생각 :

는 그리고 이것은 분명히 내가 뭔가 잘못 한 콜백을입니까?

Answer 1

여기에 문제가 있는지 확실하지 않지만 문제가 있습니다. 이 라인을 살펴보면 :

google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); 

당신이 있지만, 맵이로드되면 당신의 'addEventsToMap'를 호출하면된다하고자하는 대신에 당신이 그의 반환 값을 할당 한 다음 함수를 호출하고 일을 청취자.

대신이 코드가 필요하며 더 이상 충돌해서는 안됩니다.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    addEventsToMap(".event"); 
}); 

문제가 해결되지 않으면, 내가지도 충돌을 만들기 위해 무슨 일이 일어나고있는 오류보고, 당신이 사용하는 어떤 브라우저의 자바 스크립트 콘솔을보고 추천 할 것입니다.