Google Maps API - 形狀 ( 圓形、矩形 )

圓形和矩形在 Google Maps API 裡的設定比較有固定規則,有別於折線和多邊形,是使用陣列來標記座標點,圓形是用中心點和半徑,矩形則是兩個點 ( 四個邊 ),這篇就來把這兩種形狀放到地圖上。

起手式

圓形:的建構函式為 Circle,使用一組 LatLng 座標來指定圓心,半徑則是以公尺為單位表現,下列 CircleOptions 的部分是相關屬性設定。

var circle = new google.maps.Circle(CircleOptions)

矩形:的建構函式為 Rectangle,使用兩組 LatLng 座標來指定兩個端點 ( 四個邊 ),下列 RectangleOptions 的部分是相關屬性設定。

var rectangle = new google.maps.Rectangle(RectangleOptions)

圓形設定 Circle Options

圓形方法 Circle Methods

圓形事件 Circle Events

知道圓形的用法之後,可以在地圖上指定相對應的座標化圓,並搭配標記 marker,實現不同數值有不同半徑大小的圓形,下面的範例先用一個 position 陣列放座標經緯度,然後 num 是半徑的基準數值,實際呈現時會乘以 10。

範例:在 Google 地圖畫圓形

var map;

var position = [{
  lat: 25.0336962,
  lng: 121.5643673
}, {
  lat: 25.036518,
  lng: 121.562546
}, {
  lat: 25.033164,
  lng: 121.557472
}];

var num = [10, 20, 30];
var circle = [];
var marker = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: position[1]
  });

  position.forEach(function(e, i) {
    circle[i] = new google.maps.Circle({
      center: e,
      radius: num[i] * 10,
      strokeOpacity: 0,
      fillColor: '#f00',
      fillOpacity: 0.35,
      map: map
    });
    marker[i] = new google.maps.Marker({
      position: e,
      map: map,
      label: num[i].toString()
    });
  });

}

矩形設定 Rectangle Options

矩形和圓形大同小異,扣除圓形的centerradius其他都相同,這邊就僅列出不同的部分。

矩形方法 Rectangle Methods

除了圓形的setCenter(center)setRadius(radius)getCenter()getRadius()其他都相同,這邊僅列出不同的部分。

矩形事件 Rectangle Events

除了圓形的center_changedradius_changed其他都相同,這邊僅列出不同的部分。

下方是矩形的簡單範例,在地圖上放置矩形,並讓矩形的端點可以編輯。

範例:在 Google 地圖畫圓形

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {
      lat: 25.0336962,
      lng: 121.5643673
    }
  });

  var rect = new google.maps.Rectangle({
    bounds: {
      north: 25.034962,
      south: 25.033115,
      east: 121.565422,
      west: 121.563523
    },
    strokeOpacity: 0,
    fillColor: '#00f',
    fillOpacity: 0.35,
    editable: true,
    map: map
  });

}

參考資料:

有興趣瞧瞧其他新文章嗎?