Google Maps API - 形狀 ( 多邊形 Polygon )

使用 Google Mpas API 在 地圖上繪製多邊形跟繪製折線一樣簡單,換句話說只要把折線填滿,就變成了多邊形,折線使用 Polyline 形狀是 Polygon,多邊形可以點擊的區域也比折線大得多,這篇就來探討一下如何在地圖上繪製多邊形吧!

繪製多邊形起手式

Polygon 建構函式使用一組指定多邊形 LatLng 座標的 Paths,以及一組調整折線視覺行為的樣式,下列 PolygonOptions 的部分是相關屬性設定。

var polygonPath = new google.maps.Polygon(PolygonOptions)

多邊形設定 Polygon Options

上面起手式的 PolygonOptions 是多邊形的設定,這些設定有以下幾種:

舉例來說,下面這段程式碼執行後,會看到一個紅色的愛心框住台北 101,在邊緣上的點都可以用滑鼠去拖曳修改位置,如果仔細看,因為多邊形的 strokePosition 設為 CENTER,所以會看到邊緣重疊在多邊形上。

範例:在 Google 地圖繪製愛心多邊形

var map;

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

  var polygonPathPoints = [
    {lat: 25.032474, lng: 121.564714},
    {lat: 25.033018, lng: 121.563534},
    {lat: 25.034477, lng: 121.562954},
    {lat: 25.035157, lng: 121.563330},
    {lat: 25.035157, lng: 121.563941},
    {lat: 25.034622, lng: 121.564617},
    {lat: 25.035147, lng: 121.565390},
    {lat: 25.035021, lng: 121.565958},
    {lat: 25.034341, lng: 121.566237},
    {lat: 25.033252, lng: 121.565915}
  ];

  var polygonPath = new google.maps.Polygon({
    paths: polygonPathPoints,
    strokeColor: '#0c0',
    strokeOpacity: .5,
    strokeWeight: 20,
    strokePosition: google.maps.StrokePosition.CENTER,
    fillColor: '#f00',
    fillOpacity: 0.35,
    map:map
  });   

}

會畫愛心之後,回頭看一下剛剛提到 path 和 paths 的差異,如果使用 paths,表示我們可以使用多個多邊形,而多邊形外框的方向,決定了多邊形是否會做「交集」,如果順時針的多邊形在外,逆時針的多邊形在內,就可以繪製出「甜甜圈」外觀的造型,下面的例子,是使用三組多邊形來做交集,可以看到框住 101 的愛心中間多了個正方形的洞,然後還有另外一個三角形貫穿其中。

範例:在 Google 地圖繪製愛心多邊形,中間還有個洞

var map;

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

  var polygonPathPoints = [
    {lat: 25.032474, lng: 121.564714},
    {lat: 25.033018, lng: 121.563534},
    {lat: 25.034477, lng: 121.562954},
    {lat: 25.035157, lng: 121.563330},
    {lat: 25.035157, lng: 121.563941},
    {lat: 25.034622, lng: 121.564617},
    {lat: 25.035147, lng: 121.565390},
    {lat: 25.035021, lng: 121.565958},
    {lat: 25.034341, lng: 121.566237},
    {lat: 25.033252, lng: 121.565915}
  ];

  var p2 =[
    {lat: 25.034302, lng: 121.563748},
    {lat: 25.033427, lng: 121.563823},
    {lat: 25.033407, lng: 121.565218},
    {lat: 25.034272, lng: 121.565154}
  ];

  var p3 =[
    {lat: 25.034234, lng: 121.562418},
    {lat: 25.033524, lng: 121.564896},
    {lat: 25.034049, lng: 121.564724}
  ];

  var polygonPath = new google.maps.Polygon({
    paths: [polygonPathPoints, p2, p3],
    strokeColor: '#000',
    strokeOpacity: 1,
    strokeWeight: 3,
    strokePosition: google.maps.StrokePosition.CENTER,
    fillColor: '#f00',
    fillOpacity: 0.35,
    editable: true,
    map:map
  });   

}

多邊形方法 Polygon Methods

Polygon 除了有以上的設定外,也有下列這些方法可以使用:

多邊形事件 Polygon Events

多邊形也可以使用 addListener 監聽事件,事件有以下幾種:

透過 Polygon 的方法與事件,可以簡單做出「當滑鼠移到多邊形上就變綠色,按下滑鼠就變藍色」的效果。

範例:在 Google 地圖繪製愛心多邊形,滑鼠點擊會變色

polygonPath.addListener('mouseover',function(){
  this.setOptions({
    fillColor:'#0a0'
  });
});  

polygonPath.addListener('mouseout',function(){
  this.setOptions({
    fillColor:'#f00'
  });
}); 

polygonPath.addListener('mousedown',function(){
  this.setOptions({
    fillColor:'#00a'
  });
}); 

polygonPath.addListener('mouseup',function(){
  this.setOptions({
    fillColor:'#0a0'
  });
}); 

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