谷歌地圖疊加層

谷歌地圖 - 疊加層

疊加層是地圖上綁定到緯度/經度坐標的對象。

谷歌地圖有多種類型的疊加層：

  • 標記（Marker） - 地圖上的單個位置。標記還可以顯示自定義的圖標圖像
  • 折線（Polyline） - 地圖上的一系列直線
  • 多邊形（Polygon） - 地圖上的一系列直線，形狀是“封閉的”
  • 圓形和矩形（Circle 和 Rectangle）
  • 信息窗口（Info Windows） - 在地圖頂部的彈出氣球中顯示內容
  • 自定義疊加層（Custom overlays）

谷歌地圖 - 添加標記

Marker 構造函數可創建標記。請注意，必須設置 position 屬性才能顯示標記。

請使用 setMap() 方法將標記添加到地圖：

實例

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

谷歌地圖 - 標記動畫

下面的例子展示了如何使用 animation 屬性為標記設置動畫：

實例

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

谷歌地圖 - 用圖標替代標記

下面的例子規定要使用的圖像（圖標）來代替默認標記：

實例

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

谷歌地圖 - 折線

折線是通過按順序排列的一系列坐標繪制的線。

折線支持以下屬性：

  • path - 規定線的幾個緯度/經度坐標
  • strokeColor - 規定線條的十六進制顏色（格式："#FFFFFF"）
  • strokeOpacity - 規定線條的不透明度（0.0 到 1.0 之間的值）
  • strokeWeight - 規定線條筆劃的粗細（以像素為單位）
  • editable - 定義該行是否可由用戶編輯（true/false）

實例

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

谷歌地圖 - 多邊形

多邊形與折線類似，它由一系列按順序排列的坐標組成。然而，多邊形被設計為定義閉環內的區域。

多邊形是由直線組成的，并且形狀是“封閉的”（所有線都連接起來）。

多邊形支持以下屬性：

  • path - 規定線的幾個緯度/經度坐標（第一個和最后一個坐標相等）
  • strokeColor - 規定線條的十六進制顏色（格式："#FFFFFF"）
  • strokeOpacity - 規定線條的不透明度（0.0 到 1.0 之間的值）
  • strokeWeight - 規定線條筆劃的粗細（以像素為單位）
  • fillColor - 規定封閉區域內區域的十六進制顏色（格式："#FFFFFF"）
  • fillOpacity - 規定填充顏色的不透明度（0.0 到 1.0 之間的值）
  • editable - 定義該行是否可由用戶編輯（true/false）

實例

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

谷歌地圖 - 圓

圓支持以下屬性：

  • center - 規定圓心的 google.maps.LatLng
  • radius - 規定圓的半徑，以米為單位
  • strokeColor - 規定圓周圍線條的十六進制顏色（格式："#FFFFFF"）
  • strokeOpacity - 規定筆觸顏色的不透明度（0.0 到 1.0 之間的值）
  • strokeWeight - 規定線條筆劃的粗細（以像素為單位）
  • fillColor - 規定圓內區域的十六進制顏色（格式："#FFFFFF"）
  • fillOpacity - 規定填充顏色的不透明度（0.0 到 1.0 之間的值）
  • editable - 定義用戶是否可以編輯圓圈（true/false）

實例

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

谷歌地圖 - 信息窗口

為 marker 顯示帶有文本內容的信息窗口：

實例

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);