반응형
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 |