기존 마커 세트 (Google지도)에 새로운 고유 마커 추가

Question

JSON을 통해 PHP 스크립트에서 마커의 정보 (LatLng 등 ..)를 검색하는 Google지도가 있습니다. 기존의 모든 마커를 제거하고 bounds_changed에 마커를 가져 와서지도에 추가하는 Google Maps 리스너가 있습니다.

문제 : 마커 많은 수의,지도, 사용자가지도의 범위를 변경할 때마다 (드래그, 줌 ...)에 그려지는로 인해 ALL 마커는, 제거를 검색하고 다시 추가됩니다 , 새로운 마커 (나는 생각한다)의 그림으로 인해 주로 지연을 일으킨다. 여러 번, 사용자는 경계를 조금만 변경하면 마커의 75 %가 다시 추가됩니다.

속도를 높이기 위해 bounds_changed 이벤트에서지도가 현재지도 경계에 바인딩 된 마커 만 지우고지도 경계에있는 새로운 마커를 다운로드하고 추가해야한다고 결정했습니다. 어떻게 할 수 있습니까?

추가 정보 : 내가 새로 만든 모든 마커 모두의

Answer 1

첫째, 한 bounds_changed 이벤트가 발생 지속적으로 사용자가지도를 패닝됩니다에 pushed을 어디에 배열 markers[]을해야합니까. 당신은 이벤트 처리기에서 같이해야합니다 :

if(reloadTimer){ 
    clearTimeout(reloadTimer); 
} 
reloadTimer = setTimeout(function(){ 
    // fetch new data 
}, 400); 

둘째, 클라이언트에있는 데이터의 일부를 캐싱하여 요청의 수를 최소화 할 수있는 경우, 사용자 인터페이스는 아마 훨씬 더 반응 할 것입니다. 클라이언트에 상당히 많은 수의 마커를 캐시 할 수 있으며 여전히 뛰어난 성능을 유지할 수 있습니다. 마커는 가시적 인 범위를 벗어나면 성능에서 나빠질 수 있으므로지도에서 제거해야합니다.

대부분의 경우 사용자 및 응용 프로그램 사용 방법에 따라 클라이언트에서 데이터를 캐시 할 수 있습니다. 캐싱을 구현하는 가장 빠른 방법은 한 요청으로 서버의 모든 데이터를 전송하고 맵에서 마커를 얻을 수있는 javascript에 데이터 구조를 만드는 것입니다. 이 데이터 구조는 페이지 범위에 존재하며 맵 작업을 더 빠르게 만듭니다. 만료 헤더를 특정 시간으로 설정할 수 있으면 서버 응답이 브라우저에 캐시 될 수도 있습니다.

사용자가 응용 프로그램으로 돌아 오면 HTML5를 사용하여 데이터 구조를 localStorage 또는 sessionStorage에 저장할 수 있습니다. 사용자가 귀하의 페이지에서 유휴 상태 일 때 정기적으로 데이터를 업데이트 할 수 있습니다. http://diveintohtml5.info/storage.html

PS : 지역 storege에

더! 또한 bounds_changed 대신 idle 이벤트를 사용하는 것에 대한 skarE의 조언을 따라야합니다.

PPS! 마커를지도에 표시하는 경우 MarkerManager를 사용하는 것이 좋습니다. 마커 밀도가 높은 영역의 마커를 클러스터 그룹으로 결합하려면 MarkerClusterer (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)을 사용하는 것이 좋습니다.

Answer 2

나는 당신이 당신을 도울해야 MarkerManager Library

이 살펴보고 제안하고 당신은 당신의 자신의 솔루션을 압연 방지 할 수 있습니다.