My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 7597 추천 수 0 댓글 5
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

개발 중 맵상에 수백 수만개의 마커를 생성해야하는 경우가 당연히(?) 발생됩니다.

이때 버버벅...리소스를 엄청나게 먹으면서 느려질수가 있는데요. 이럴 때 사용할수 있는 샘플입니다.


기존 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 소스에다가 추가했습니다.


현재 보여지는 맵상에 좌측상단 좌표와 우측하단 좌표를 읽어와서 해당 범위내에 있는 마커만 보여지도록 하고

맵이 확대/축소되거나 좌표가 이동하는 경우에 마커를 다시 뿌려지도록 하는 방법입니다.


기능 구현위주의 샘플이다보니 좀 다듬어야할 부분이 많지만 쓰시는분에게 떠넘기기를..^^;;

( 여기서 상황에 따라 고민해야할 내용으로... 이걸 Js에서 처리할지..DB에서 처리할지.. )



주요 내용으로는 :


1. 이벤트 리스너 추가를 통해 현재 맵 범위좌표 확인.  ( 하단 참고 Url을 보시면 관련 내용에 대한 링크가 있습니다. )

google.maps.event.addListener(map, 'idle', function(){
	startLat = map.getBounds().getSouthWest().lat();
	startLng = map.getBounds().getSouthWest().lng();
	endLat = map.getBounds().getNorthEast().lat();
	endLng = map.getBounds().getNorthEast().lng(); 
});


2. 마커 생성시 위경도 좌표를 비교하여 생성유무 확인.


Test Url :  http://www.uhoon.co.kr/test/3401.html


1.png


2.png


참고 Url : https://developers.google.com/maps/documentation/javascript/reference

필요에 따라 이벤트 리스너를 추가해주시면 됩니다. 샘플상에는 처음 로드 , 드래그 , 줌아웃 시에 좌표를 확인해여 재생성하도록 되어있습니다.

이벤트 리스너 추가시 서로 중첩되는 내용이 있는 경우 마커 생성 함수가 여러번 호출되어 더 느려질수 있습니다. 고민+고민이 필요합니다.


관련 게시물 : 

  1. [2015/12/29] 구글맵 v3 infoBox by kay (2942)
  2. [2015/12/28] 구글맵 v3 단순 다중 마커 (배열이용) by kay (10255) *2
  3. [2015/02/05] 구글맵 마커 + 말풍선 - v3 by kay (3277) *2
  4. [2014/07/17] 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) by kay (16913) *24
  5. [2014/04/21] Google 웹사이트 번역기 by kay (5316) *2
?
  • ?
    몽이 2014.08.28 13:38

    안녕하세요...

    궁금한게 있어 글을 올립니다..

     

    현재 내위치를 확인하려고 보면 메세지로 Would Like To Use Your Currnet Location. 이라고 물어봅니다..

    영문이 아니라 한글로 혹시 표시가 가능한가요?'

     

    바쁘시겠지만 답변 부탁드립니다.

     

    감사합니다.

  • ?
    kay 2014.08.29 11:20 Files첨부 (1)

    images.jpg

    이 메시지 말씀하시는건가요..

    IOS 에서 나오는 시스템 메시지인듯 합니다. 위치정보 사용 허용유무 확인 메시지네요..

    웹에서 보여주는 메시지가 아닙니다..^^


  • ?
    11 2014.09.02 15:14

    넵....호출할때

    말씀하신 화면이 나옵니다. iOS에서요..

     

    헌데 이게 한글로 왜 나오지 않을까 생각을 해서요....

     

    다른앱들은 한글이던데.......혹시 한글로 하기위해서 설정같은게 필요하지 않을까해서요....

     

     

  • ?
    tommy 2014.11.25 18:27

    3300.js 파일좀 확인할 수 있을까요?

    계속 삽질중이라....

  • ?
    kay 2014.11.26 11:42

    http://www.uhoon.co.kr/test/3300.html

    페이지 소스보기 하시면 보실수 있습니다.


    http://www.uhoon.co.kr/test/3300/3300.js


    json 포멧입니다.


    [

    {"lat":"37.5324201","lng":"126.99034879999999","icon" :"http://google-maps-icons.googlecode.com/files/walking-tour.png","cont":"용산구청"},

    {"lat":"37.5630554","lng":"127.03671250000002","icon" :"http://google-maps-icons.googlecode.com/files/walking-tour.png","cont":"성동구청"},

    {"lat":"37.2980237","lng":"127.63716279999994","icon" :"http://google-maps-icons.googlecode.com/files/walking-tour.png","cont":"여주시"}

    ]


  1. 선 그래프

    Date2013.02.06 CategoryGraph Bykay Views6297
    Read More
  2. 선 + 막대 그래프

    Date2013.02.06 CategoryGraph Bykay Views8655
    Read More
  3. 막대 그래프

    Date2013.02.06 CategoryGraph Bykay Views8497
    Read More
  4. geocode - 구글 맵 위경도 검색 v2

    Date2013.02.06 Categorymap Bykay Views7296
    Read More
  5. 구글맵 마커 + 말풍선 - v2

    Date2013.02.06 Categorymap Bykay Views10979
    Read More
  6. geocode - 주소로 위경도 검색 v3

    Date2013.04.21 Categorymap Bykay Views8048
    Read More
  7. 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3

    Date2013.04.22 Categorymap Bykay Views14704
    Read More
  8. 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동

    Date2013.04.24 Categorymap Bykay Views10240
    Read More
  9. 구글맵 출발지 도착지 주소입력해서 길찾기 - v3

    Date2013.05.03 Categorymap Bykay Views28991
    Read More
  10. 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker )

    Date2013.05.31 Categorymap Bykay Views24274
    Read More
  11. google 스트릿뷰 "Street View"

    Date2013.08.27 Categorymap Bykay Views4705
    Read More
  12. 구글맵 API 적용범위 (Google Maps API Coverage)

    Date2013.08.27 Categorymap Bykay Views4975
    Read More
  13. GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 "

    Date2013.08.28 Categorymap Bykay Views5241
    Read More
  14. Google Places API를 이용한 주변 지역 정보 검색

    Date2013.10.18 Categorymap Bykay Views21300
    Read More
  15. Google 웹사이트 번역기

    Date2014.04.21 Category기타 Bykay Views5316
    Read More
  16. 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json )

    Date2014.07.17 Categorymap Bykay Views16913
    Read More
  17. 구글맵 v3 맵상에 보여지는 마커만 생성하기

    Date2014.08.04 Categorymap Bykay Views7597
    Read More
  18. 구글맵 마커 + 말풍선 - v3

    Date2015.02.05 Categorymap Bykay Views3277
    Read More
  19. 구글맵 v3 단순 다중 마커 (배열이용)

    Date2015.12.28 Categorymap Bykay Views10255
    Read More
  20. 구글맵 v3 infoBox

    Date2015.12.29 Categorymap Bykay Views2942
    Read More
Board Pagination Prev 1 Next
/ 1