在Google map 上畫同心圓

  • 18383
  • 0
  • GCP
  • 2020-04-18

本來是要在Google map 上,以公司的地點為圓心畫出半徑5公里的圓形,以方便計算運費。

想不到在Google map 上,只能畫直線。

因此只好透過API 來畫出同心圓

 

 本篇會使用到 Google Cloud Platform 以及Maps JavaScript API

畫圓心的程式碼很簡單,但就是沒有辦法直接在一般的Google map上用

下面我會以我最終的完成圖來做說明

先看實際完成圖以及代碼部分。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // This example creates circles on the map, representing populations in North
        // America.

        // First, create an object containing LatLng and population for each city.
        var citymap = {
            km2: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 2000
            },
            km6: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 6000
            }, km9: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 9000
            },
        };

        function initMap() {
            // Create the map.
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: { lat: 24.99817, lng: 121.508 },
                mapTypeId: 'terrain'
            });

            // Construct the circle for each value in citymap.
            // Note: We scale the area of the circle based on the population.
            for (var city in citymap) {
                // Add the circle for this city to the map.
                var cityCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: 'Transparent',
                    fillOpacity: 0.35,
                    map: map,
                    center: citymap[city].center,
                    radius: citymap[city].meter
                });
            }
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
    </script>
</body>
</html>

首先,要先去註冊一個 Google Cloud Platform 的帳號,會有200元美金的額度的樣子。

啟用 Map Javascript API

啟用完畢後,點進去切換到憑證的頁面,裡面會有一組KEY,等等會用到。

第二步,開個新的記事本,貼上上面的程式碼。在最下方這一段中有一個key=mykey,將mykey替換成上一步,憑證頁面中的Key。

<script async defer
            src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
    </script>

這邊設定正確,儲存文件成HTML檔案,開啟後,就會是上方的完成圖。

 

下面會說各個參數設定

var citymap = {
            km2: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 2000
            },
            km6: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 6000
            }, km9: {
                center: { lat: 24.99817, lng: 121.508 },
                meter: 9000
            },
        };

圖中有三個圓圈,分別是2公里,6公里,跟9公里。

center是圓圈的中心,輸入緯度跟經度

meter代表公尺

想畫幾個圓圈就放幾組

 

function initMap() {
            // Create the map.
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: { lat: 24.99817, lng: 121.508 },
                mapTypeId: 'terrain'
            });

            // Construct the circle for each value in citymap.
            // Note: We scale the area of the circle based on the population.
            for (var city in citymap) {
                // Add the circle for this city to the map.
                var cityCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: 'Transparent',
                    fillOpacity: 0.35,
                    map: map,
                    center: citymap[city].center,
                    radius: citymap[city].meter
                });
            }
        }

在Init map 中,第一段是網頁一開始進去的顯示方式

zoom是設定畫面的縮放程度。

center是畫面的中心位置,輸入緯度跟經度。

由於我們是畫同心圓,所以設定一樣就好。

第二段的迴圈是開始畫圓

strokeColor是圓圈的邊線,設定成紅色
strokeOpacity是邊線的透明度
strokeWeight是邊線的寬度
fillColor是圓圈內部的填滿色,這邊是設定成透明的,才看得清中間的地圖。
fillOpacity是圓圈內部填滿色的透明度

其他更詳細的參數以及其他API可以從API使用手冊中了解。

使用完之後,記得要先關閉 Google Cloud Platform 的API,或是設定成有限制的,以防費用超出免費額度

參考資料:Google API使用手冊https://developers.google.com/maps/documentation/javascript/get-api-key

有任何改進的意見及問題歡迎傳送到電子郵件

電子郵件:momo16542@gmail.com