HTML 5 學習心得

#第八週

製作地圖--MAPBOX

今天學習如何做一個地圖

  • 地圖；除了MapBox以外，還有一個是大家熟知的Google Map，但是因為Google Map的條約關係以及付費問題，所以這裡暫時不引用Google Map的例子
  • 要做的：輸入GPS 經緯度，彈出位置信息在地圖上

1. 輸入GPS 經緯度

2. 顯示地圖上GPS 位置坐標

part-1

輸入界面

  • 跟上期的設計方法一樣，這回是讀取兩個值，並在剛開始的輸入欄裡放入一個預設的初始值

#第10排的file location也可以替換成Website Address

第二部分相較於第一部分複雜許多，我們先從<body>部分開始理解，比較容易

part-2

  • 首先<body> 一開始的部分是針對Marker的Style 設的一些參數
  • 接下來就是執行一連串的程式，其中比較特別的概念是"container"，就像字面意義上的那樣，我們這回設好空間並命名ID後，這個空間就變成了一個container，後續我們將執行好的內容裝回去這個"container"裡

這是draggable: true的效果

回到<head>的部分

#當中第11排是一個很重要的東西，待會兒還會再提到

程式流程

  1. <input> ；讓使用者從界面輸入經緯度
  2. 按下button以後，程式從界面中讀取用戶輸入的資料，並將資料與預設好的link結合，並打開新鏈接在新網頁
  3. 從網址中讀取參數『經緯度』，並將參數丟進程式中
  4. 獲得參數，再運用上mapbox的功能，顯示出地圖

#以上是大致流程，mapbox裡還有其他許多其他的功能，這裡並沒有一一敘述，想深入研究，可以上mapbox的官網學習

補充說明：顯示多個地圖在同一個網頁上

  • 其實在一個網頁上要實現展示多個地圖，無疑就是將程式多Copy幾份就可以了，這裡我是想要補充說明mapbox地圖命名時要注意的事項

在Copy的時候，記得要將名字也改一改『圖片中二個的Id name，以及container name』

#這裡我將名字改成"aaa"

總結：到了這一期，學的東西也越來越多，加上期末要到了，個人網頁要想辦法弄出來了，現在開始有點壓力了。雖然學了很多東西跟技巧，但是要將自己所學過的東西全部整合在一起，並加以設計及使用，對我目前而言還是有很大挑戰性的，接下里來會按部就班開始一點點做個人網頁了。Mapbox這個資源，其實我也是第一次去接觸，對它還不是很熟悉，包括它的指令集，也還沒了解完畢，不過已經有先設想好要怎麼使用這個資源了，希望我有時間來得及了解mapbox哈哈哈

文件一『檔案名：demo.html』

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search</title>
    <script>
        function myFunction(){
             var x = document.getElementById("myText1").value;
             var y = document.getElementById("myText2").value;
             window.open("file:///G:/Pycharm/HTML-Practice/demo.html?x=" + x +"&y="+ y);
        }
    </script>
</head>
<body style="background-color:#FFCCBC;">
    <h1>Search:</h1>
    <h1>Longitude <input type="text" id="myText1" value="111.832806"></h1>
    <h1>Latitude <input type="text" id="myText2" value="2.286118"></h1>
    <button onclick="myFunction()">Try it</button>
</body>
</html>


文件二『檔案名：demo2.html』

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Create a draggable Marker</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <style>
    body { margin: 0; padding: 0; }
    #aaa { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
    <script type="text/javascript">

      function GetUrlVar(VarName)
      {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + VarName + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
              return "";
        else
          return results[1];
      }

        var x = decodeURIComponent(GetUrlVar('x'));
      var y = decodeURIComponent(GetUrlVar('y'));


    </script>
</head>
<body>
<style>
    .coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 40px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
    }
</style>

    <div id='aaa'></div>
    <pre id='coordinates' class='coordinates'></pre>

    <script>

        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbnl1eWkiLCJhIjoiY2l1ZWoxemx6MDAweTJ5cHI3NHNnajR2NiJ9.cNpWK-0HoYbcumuQ8yvbjQ';
        var coordinates = document.getElementById('coordinates');
        var map = new mapboxgl.Map({
        container: 'aaa',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [x,y],
        zoom: 15
        });

        var marker = new mapboxgl.Marker({draggable: true});
        marker.setLngLat([x,y]);
        marker.addTo(map);

        function onDragEnd() {
        var lngLat = marker.getLngLat();
        coordinates.style.display = 'block';
        coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
        }

        marker.on('dragend', onDragEnd);
    </script>

</body>
</html>