遊記ep.28 Marker labels in Google村

第 11 屆 iThome 鐵人賽

DAY 28

自我挑戰組

Ruby菜鳥村村民遊記系列第 28 篇

11th鐵人賽 google api google map

Bunny

2019-10-13 22:33:05

1533 瀏覽

分享至

今天繼續來介紹，如何幫 Marker 做點美化～
除了在 marker icon屬性設定，可以客制自己獨特的 icon 圖案：

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var Marker = new google.maps.Marker({
    position: {lat: 23.5, lng: 121},
    map: map,
    icon: image
});

也可以利用 marker label 來點綴一下原始的 marker，
而這也是今天我想介紹的主題：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Labels</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 80%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=PutKeyHere"></script>
    <script>
      // In the following example, markers appear when the user clicks on the map.
      // Each marker is labeled with a single alphabetical character.
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      var labelIndex = 0;

      function initialize() {
        var taiwan = { lat: 23.5, lng: 121 };
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: taiwan
        });

        // This event listener calls addMarker() when the map is clicked.
        google.maps.event.addListener(map, 'click', function(event) {
          addMarker(event.latLng, map);
        });

        // Add a marker at the center of the map.
        addMarker(taiwan, map);
      }

      // Adds a marker to the map.
      function addMarker(location, map) {
        // Add the marker at the clicked location, and add the next-available label
        // from the array of alphabetical characters.
        var marker = new google.maps.Marker({
          position: location,
          label: labels[labelIndex++ % labels.length],
          map: map
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var labelIndex = 0;

  function initialize() {
    var taiwan = { lat: 23.5, lng: 121 };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: taiwan
    });

    // This event listener calls addMarker() when the map is clicked.
    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng, map);
    });

    // Add a marker at the center of the map.
    addMarker(taiwan, map);
}

我們先產生出一組字串 labels，
建立好地圖後，對地圖設定一個事件觸發：click 後會觸發 addMarker 的函式，
再來看看 addMarker 做了什麼：

function addMarker(location, map) {
    // Add the marker at the clicked location, and add the next-available label
    // from the array of alphabetical characters.
    var marker = new google.maps.Marker({
      position: location,
      label: labels[labelIndex++ % labels.length],
      map: map
    });
}

主要就是生成一個一個 marker 在地圖上，
但裡面有個設定跟今天介紹的 marker label 有關，
在 marker 的設定中有個 label 的屬性，
label: labels[labelIndex++ % labels.length
這裡去抓 labels字串中第幾位把對應到的字母放進 marker 裏頭，
1 % 26 餘數就是為 1，所以我們得到 B 字母，依此類推。
這樣我們就完成了在地圖上任意點擊產生的 marker 都能依序放上不同的字母囉！

今天，你把玩 Google Map 了嗎？：）

參考文件：
Google map 官方文件