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 (16912) *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":"여주시"}

    ]