My Name is Kay....

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

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 7594 추천 수 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 (2932)
  2. [2015/12/28] 구글맵 v3 단순 다중 마커 (배열이용) by kay (10249) *2
  3. [2015/02/05] 구글맵 마커 + 말풍선 - v3 by kay (3275) *2
  4. [2014/07/17] 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) by kay (16905) *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":"여주시"}

    ]


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 2932
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 10249
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 3275
» map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 7594
16 map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 16905
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5316
14 map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 21294
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 5240
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4974
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4704
10 map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 24273
9 map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 28986
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 10239
7 map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 14702
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 8047
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10978
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 7295
3 Graph 막대 그래프 kay 2013.02.06 8496
2 Graph 선 + 막대 그래프 kay 2013.02.06 8653
1 Graph 선 그래프 file kay 2013.02.06 6296
Board Pagination Prev 1 Next
/ 1