이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
0c4b0a67 1 parent 88d75d6b

현재 위치 기반 주변 contents 마커 생성

Inline Side-by-side
Showing 5 changed files with 220 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>geolocation으로 마커 표시하기</title>
6 +
7 +</head>
8 +<body>
9 +<p style="margin-top:-12px">
10 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 +</p>
12 +<div id="map" style="width:500px;height:350px;"></div>
13 +
14 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
15 +<script>
16 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
17 + mapOption = {
18 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
19 + level: 10 // 지도의 확대 레벨
20 + };
21 +
22 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
23 +
24 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
25 +if (navigator.geolocation) {
26 +
27 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
28 + navigator.geolocation.getCurrentPosition(function(position) {
29 +
30 + var lat = position.coords.latitude, // 위도
31 + lon = position.coords.longitude; // 경도
32 + console.log(lat);
33 + console.log(lon);
34 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
35 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
36 +
37 + // 마커와 인포윈도우를 표시합니다
38 + displayMarker(locPosition, message);
39 +
40 + });
41 +
42 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
43 +
44 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
45 + message = 'geolocation을 사용할수 없어요..'
46 +
47 + displayMarker(locPosition, message);
48 +}
49 +
50 +
51 +var positions = [
52 + {
53 + title: '카카오',
54 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
55 + }
56 +];
57 +
58 +
59 +displayShows(positions);
60 +function displayShows(positions){
61 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 +
63 +for (var i = 0; i < positions.length; i ++) {
64 +
65 + // 마커 이미지의 이미지 크기 입니다
66 + var imageSize = new kakao.maps.Size(24, 35);
67 +
68 + // 마커 이미지를 생성합니다
69 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
70 +
71 + // 마커를 생성합니다
72 + var marker = new kakao.maps.Marker({
73 + map: map, // 마커를 표시할 지도
74 + position: positions[i].latlng, // 마커를 표시할 위치
75 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
76 + image : markerImage // 마커 이미지
77 + });
78 + }
79 +}
80 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
81 +function displayMarker(locPosition, message) {
82 +
83 + // 마커를 생성합니다
84 + var marker = new kakao.maps.Marker({
85 + map: map,
86 + position: locPosition
87 + });
88 +
89 + var iwContent = message, // 인포윈도우에 표시할 내용
90 + iwRemoveable = true;
91 +
92 + // 인포윈도우를 생성합니다
93 + var infowindow = new kakao.maps.InfoWindow({
94 + content : iwContent,
95 + removable : iwRemoveable
96 + });
97 +
98 + // 인포윈도우를 마커위에 표시합니다
99 + infowindow.open(map, marker);
100 +
101 + // 지도 중심좌표를 접속위치로 변경합니다
102 + map.setCenter(locPosition);
103 +}
104 +</script>
105 +</body>
106 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +var http = require('http');
2 +var fs = require('fs');
3 +var app = http.createServer(function(request,response){
4 + var url=request.url;
5 + if(url == '/'){
6 + url = '/mapPage.html';
7 + }
8 + response.writeHead(200);
9 + response.end(fs.readFileSync(__dirname+url));
10 +});
11 +
12 +app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8">
5 + <title> map Page title </title>
6 + </head>
7 +<body>
8 + <div id="map" style="width:500px;height:350px"></div>
9 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
10 +
11 + <script src="./mypos.js"></script>
12 + <script src="./show_pos.js"></script>
13 +</body>
14 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
2 +
3 +// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
4 +mapOption = {
5 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
6 + level: 5 // 지도의 확대 레벨
7 + };
8 +
9 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
10 +
11 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
12 +if (navigator.geolocation) {
13 +
14 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
15 + navigator.geolocation.getCurrentPosition(function(position) {
16 +
17 + var lat = position.coords.latitude, // 위도
18 + lon = position.coords.longitude; // 경도
19 +
20 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
21 + message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
22 +
23 + // 마커와 인포윈도우를 표시합니다
24 + displayMarker(locPosition, message);
25 +
26 + });
27 +
28 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
29 +
30 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
31 + message = 'geolocation을 사용할수 없어요..'
32 +
33 + displayMarker(locPosition, message);
34 +}
35 +
36 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
37 +function displayMarker(locPosition, message) {
38 +
39 + // 마커를 생성합니다
40 + var marker = new kakao.maps.Marker({
41 + map: map,
42 + position: locPosition
43 + });
44 +
45 + var iwContent = message, // 인포윈도우에 표시할 내용
46 + iwRemoveable = true;
47 +
48 + // 인포윈도우를 생성합니다
49 + var infowindow = new kakao.maps.InfoWindow({
50 + content : iwContent,
51 + removable : iwRemoveable
52 + });
53 +
54 + // 인포윈도우를 마커위에 표시합니다
55 + infowindow.open(map, marker);
56 +
57 + // 지도 중심좌표를 접속위치로 변경합니다
58 + map.setCenter(locPosition);
59 +}
...\ No newline at end of file ...\ No newline at end of file
1 +var positions = [
2 + {
3 + title: '카카오',
4 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
5 + }
6 +];
7 +
8 +displayShows(positions);
9 +
10 +function displayShows(positions){
11 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
12 +
13 +for (var i = 0; i < positions.length; i ++) {
14 +
15 + // 마커 이미지의 이미지 크기 입니다
16 + var imageSize = new kakao.maps.Size(24, 35);
17 +
18 + // 마커 이미지를 생성합니다
19 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
20 +
21 + // 마커를 생성합니다
22 + var marker = new kakao.maps.Marker({
23 + map: map, // 마커를 표시할 지도
24 + position: positions[i].latlng, // 마커를 표시할 위치
25 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
26 + image : markerImage // 마커 이미지
27 + });
28 + }
29 +}
...\ No newline at end of file ...\ No newline at end of file