'javascript' 카테고리의 글 목록

HTML5 navigator.geolocaiotn 위치정보수집

javascript

1. Google API 인증키 얻기

- 링크 : https://code.google.com/apis/console

2. Google Map API

- 링크 : https://developers.google.com/maps/documentation/javascript/tutorial

3. 해당 소스

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<p style="text-align: center;"><button id="getLocation" type="button">위치 정보 수집</button></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"></p>
    <div style="text-align: center;"><div id="map" style="width: 500px; height: 500px; display: inline-block; text-align: center;"></div></div><p>
</p>
<script>
    (function () {
      let map, infoWindow;
      window.initMap = function () {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
        infoWindow = new google.maps.InfoWindow({map: map});
        infoWindow.setContent('Your location');
      };
      function successCallback(position) {
          let pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
          };
          infoWindow.setPosition(pos);
          map.setCenter(pos);
          alert("Your current position is: latitude(" + pos.lat + "), longitude(" + pos.lng + ")");
      }
      function errorCallback(error) {
          alert("Error: " + error.message);
      }
      document.getElementById("getLocation").onclick = function () {
          navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
      };
    }());
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={$API_KEY}&callback=initMap" async="" defer=""></script>

- 참고 사이트 http://unikys.tistory.com/375

저작자표시 비영리 변경금지

Posted by 1+1은?

bluelemonwater 1+1은? 님의 블로그입니다.

jQuery moris.js(free-license)

javascript/jQuery

examples.zip

출처 : http://www.oesmith.co.uk/morris.js/index.html

jQuery 차트를 만드는 방법

1. 추가

1

2

3

4

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

2. <div>

1	`<div id="myfirstchart"` `style="height: 250px;"></div>`

3. <script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

var nReloads = 0;
function data(offset) {
  var ret = [];
  for (var x = 0; x <= 360; x += 10) {
    var v = (offset + x) % 360;
    ret.push({
      x: x,
      y: Math.sin(Math.PI * v / 180).toFixed(4),
      z: Math.cos(Math.PI * v / 180).toFixed(4)
    });
  }
  return ret;
}
var graph = Morris.Line({
    element: 'graph',
    data: data(0),
    xkey: 'x',
    ykeys: ['y', 'z'],
    labels: ['sin()', 'cos()'],
    parseTime: false,
    ymin: -1.0,
    ymax: 1.0,
    hideHover: true
});
function update() {
  nReloads++;
  graph.setData(data(5 * nReloads));
  $('#reloadStatus').text(nReloads + ' reloads');
}
setInterval(update, 200);