Google Maps Overlay

Google Maps - Overlay

Ang overlay ay isang bagay na nakatalaga sa mga latitude/longitude coordinates sa mapa.

May iba't ibang uri ng overlay ang Google Maps:

• Markero (Marker) - Isang solong posisyon sa mapa. Ang markero ay maaari ring ipakita ang isang ikonyo na ginawa sa pagkakaroon ng sariling imahen.
• Linya ng Pahaba (Polyline) - Isang serye ng linya sa mapa
• Poligono (Polygon) - Isang serye ng linya sa mapa, na may hugis na 'nakakapit na'
• Sirkulo at Parahagon (Circle at Rectangle)
• Info Windows (Info Windows) - Nagpapakita ng nilalaman sa isang popup balloon sa itaas ng mapa
• Custom Overlay (Custom Overlays)

Google Maps - Pagdagdag ng Markero

Ang constructor ng Marker ay nagbibigay ng markero. Mangyaring mag-set sa position property upang ipakita ang markero.

Gumamit ng paraan na setMap() upang idagdag ang markero sa mapa:

实例

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

Google Maps - Animasyon ng Markero

Ang sumusunod na halimbawa ay nagpapakita kung paano gamitin ang animation property upang itakda ang animasyon sa markero:

实例

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

Google Maps - Pagpalit ng Ikonyo sa Markero

Ang sumusunod na halimbawa ay nagtutukoy sa imaheng ginagamit (ikonyo) para ipalit sa pangkaraniwang markero:

实例

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

Google Maps - Linya ng Pahaba

Ang linya ng pahaba ay isang linya na ginawa sa pamamagitan ng pagkakasunod-sunod na isang serye ng koordinado.

Ang linya ng pahaba ay sumusuporta sa mga sumusunod na katangian:

• path - Tukuyin ang ilang latitude/longitude coordinates ng linya
• 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);