반응형
1. include script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script> <script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
2. 로드시 geolocation 호출 / navigator.geolocation.getCurrentPosition
$(window).on("load", function(){ navigator.geolocation.getCurrentPosition( fninitLoadMap, fnGpsNone, {maximumAge:10000, timeout:5000, enableHighAccuracy:true} ); //성공시함수, 실패시함수, ...{세팅해주면 모바일에서 좋음ㅋ} });
3. 실패시 함수는 알림창띄우고, 성공시 ajax사용함
* 상단에서 서버언어로 가져와도 무방.
function fninitLoadMap(position){ //position값 받아서 사용 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 16, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; $.ajax({ type: "POST", url: "/GetNearStore.php", async: false, data:{ //나의 위치를 넘겨주어 넘겨준 좌표로 반경내 계산후 리스트가져옴 LAT:position.coords.latitude, LNG:position.coords.longitude }, dataType: "json", success: function(jdata) { markers = jdata; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var div = document.getElementById("marker"); mymarker = new RichMarker({ map: map, position: map.getCenter(), draggable: false, flat: true, anchor: RichMarkerPosition.MIDDLE, content: div }); // 마커 생성 for (index in markers) addMarker(markers[index]); function addMarker(data) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.lat, data.lng), map: map, title: data.name }); var contentString = data.info; var infowindow = new google.maps.InfoWindow({ content: contentString}); google.maps.event.addListener(marker, "click", function() { infowindow.open(map,marker); }); } //조회성공 }, error:function(xhr){ console.log(xhr.responseText); return; } }); }
4. 서버처리(업체마다 좌표값 세팅되어있음.)
$getLat = trim($_POST['LAT']); $getLng = trim($_POST['LNG']); $getLat = quote_smart($getLat); $getLng = quote_smart($getLng); $query = "SELECT A.REG_NO, A.M_ZIP, A.M_ADDR, A.M_ADDR_D, A.M_TEL, B.STORE_NAME, B.STORE_TXT, B.STORE_IMG, B.STORE_LAT, B.STORE_LNG, (3959 * acos( cos( radians($getLat) ) * cos( radians( B.STORE_LAT ) ) * cos( radians( B.STORE_LNG ) - radians($getLng) ) + sin( radians($getLat) ) * sin( radians( B.STORE_LAT ) ) ) ) AS distance FROM MEMBER_INFO A LEFT JOIN STORE_INFO B ON A.REG_NO = B.M_REG_NO WHERE A.DEL_YN = 'N' HAVING distance <= 1 ORDER BY A.REG_NO"; //distance <= 1 부분이 1km이내 조건문 $result = mysql_query($query); $return_array = array(); while ($data = mysql_fetch_array($result)){ $row_array['rno'] = $data['REG_NO']; $row_array['lat'] = $data['STORE_LAT']; $row_array['lng'] = $data['STORE_LNG']; $row_array['info'] = ''.$data['STORE_NAME'].'
업체바로가기'; array_push($return_array, $row_array); } echo json_encode($return_array);
결과
반응형
'프로그래밍 > JavaScipt' 카테고리의 다른 글
javascript object equal 객체비교하기 (0) | 2017.12.27 |
---|---|
javascript 카카오네비 api 연동 (0) | 2017.07.21 |
javascript ajax로 동적 select box 가져오기 (0) | 2017.07.12 |
javascript http html5 geolocation api 사용제한 (0) | 2017.07.10 |
javascript daum 주소검색 api https (0) | 2017.06.27 |