iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
0
自我挑戰組

介面設計流程與開發2系列 第 13

切版-以Daily UI 41-Workout Tracker為例 2/2

接續 Workout Tracker 切版實作,今天要分享切版時套用 Snapps Maps 在地圖客製化樣式實作。

建立 Map Javascript API
要套用客製化地圖在切版時,需先至 Google Maps APIs 去得專屬於自己專案的 API Key。

  1. 點選 Get A Key 按鈕,建立自己的專案。
    https://ithelp.ithome.com.tw/upload/images/20180101/20103234vBqAUhzzyI.png

  2. 隨後即可取得 API Key
    https://ithelp.ithome.com.tw/upload/images/20180101/201032347lSvPKJOs6.png

請先保留這串 API key, 後面會用到

將樣式套用至專案地圖上

  • 首先在 html 檔案中地圖區塊設定 id
<div id="map"></div>
  • 並在 html 檔案載入 Google Maps JavaScript API,這邊要注意:需將 YOUR_API_KEY 換成剛剛取得的 API Key
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  • 接著在 css 檔案中設定地圖區塊的長寬
#map {
    width: 100%;
    height: calc(100vh - 261px);
}
  • 設定地圖中心位置經緯度:在 javascript 中宣告地圖初始化,並將經緯度設定程式碼至入
function initMap() {
     var map;
     map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 25.0324, lng: 121.5349},
     zoom: 16
     });
     map.mapTypes.set('styled_map', styledMapType);
     map.setMapTypeId('styled_map');
}
  • 此時已可在畫面上看到地圖已載入,最後就是將設計師調整好的 snazzy map 樣式的 javascript 複製至專案的 javascript 檔案中
var styledMapType = new google.maps.StyledMapType(
[
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    }
],
{name: 'Styled Map'});

如此就大功告成啦!若想看參考範例可至我的 github 專案:IT30-Project2

-By Anny


上一篇
切版-以Daily UI 41-Workout Tracker為例 1/2
下一篇
信用卡付款行為之設計思考,以Daily UI 02- Credit Card Checkout為例 1/3
系列文
介面設計流程與開發230

尚未有邦友留言

立即登入留言