JS-網站互動設計程式進化之道-APIs

發表於

APIs

JavaScript&JQuery-網站互動設計程式進化之道-APIs

學習筆記(8) - APIs

簡單是複雜的終極形式 - 萊昂納多‧達‧芬奇

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

九、APIs

Local Storage & Session Storage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (Modernizr.localstorage) { //or Modernizr.sessionstorage

    var txtUsername = document.getElementById('username'); // Get form elements
    var txtAnswer = document.getElementById('answer');
    // getItem,擷取資訊 
    txtUsername.value = localStorage.getItem('username');  // Elements populated
    txtAnswer.value = localStorage.getItem('answer');      // by localStorage data
    //setItem,儲存資訊
    txtUsername.addEventListener('input', function () {    // Data saved on keyup
        localStorage.setItem('username', txtUsername.value);
    }, false);

    txtAnswer.addEventListener('input', function () {      // Data saved on keyup
        localStorage.setItem('answer', txtAnswer.value);
    }, false);
}

Google Map

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//Basic Google Map
function init() {
    var mapOptions = {                                 // Set up the map options
        center: new google.maps.LatLng(40.782710,-73.965310), //經度緯度
        mapTypeId: google.maps.MapTypeId.ROADMAP, //地圖類型ROADMAP
        zoom: 13 //縮放程度1~16
    };
    var venueMap;                                      // Map() draws a map
    venueMap = new google.maps.Map(document.getElementById('map'), mapOptions);
    }

function loadScript() {
    var script = document.createElement('script');     // Create <script> element
    script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=init';
    document.body.appendChild(script);                 // Add element to page
    }

window.onload = loadScript;                          // on load call loadScript()

//Custom Controls
function init() {
    // the mapOptions object contains the information to initialise the map to how we want it
    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(40.782710,-73.965310),
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        panControl: false, //水平移動地圖
        zoomControl: true, //縮放軸工具
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
        },
        mapTypeControl: true, //切換地圖類型
        mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP_LEFT
        },
        scaleControl: true, //地圖比例尺
        scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER
        },
        streetViewControl: false,
        overviewMapControl: false
    };
    var venueMap = new google.maps.Map(document.getElementById('map'), mapOptions);
    }

//加入標示點
    var startPosition = new google.maps.Marker({    // Create a new marker
        position: pinLocation,                        // Set its position
        map: venueMap,                                // Specify the map
        icon: "img/go.png"                            // Path to image from HTML
    });