Strati di Google Maps

谷歌地圖 - 叠加层

叠加层是地图上绑定到緯度/經度坐標的對象。

谷歌地图有多种类型的叠加层：

  • 标记（Marker） - 地图上的单个位置。标记还可以显示自定义的图标图像
  • 折线（Polyline） - 地图上的一系列直线
  • 多边形（Polygon） - 地图上的一系列直线，形状是“封闭的”
  • 圆形和矩形（Circle 和 Rectangle）
  • 信息窗口（Info Windows） - 在地图顶部的弹出气球中显示内容
  • 自定义叠加层（Custom overlays）

谷歌地圖 - 添加標記

Marker 构造函数可创建标记。请注意，必须设置 position 属性才能显示标记。

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

istanza

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

谷歌地圖 - 標記動畫

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

istanza

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

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

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

istanza

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

谷歌地圖 - 折線

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

折線支持以下屬性：

  • path - 定義線的幾個緯度/經度坐標
  • strokeColor - Specificare il colore esadecimale della linea (formato: "#FFFFFF")
  • strokeOpacity - Specificare l'opacità della linea (valore tra 0.0 e 1.0)
  • strokeWeight - Specificare lo spessore della linea (in pixel)
  • editable - Definire se la linea può essere modificata dall'utente (true/false)

istanza

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

Google Maps - Poligono

Il poligono è simile al poligono, è composto da una serie di coordinate ordinate. Tuttavia, il poligono è progettato per definire l'area interna chiusa.

Il poligono è composto da linee e ha una forma "chiusa" (tutte le linee si connettono).

Il poligono supporta le seguenti proprietà:

  • path - Specificare diversi coordinate latitudine/longitudine della linea (la prima e l'ultima coordinate sono uguali)
  • strokeColor - Specificare il colore esadecimale della linea (formato: "#FFFFFF")
  • strokeOpacity - Specificare l'opacità della linea (valore tra 0.0 e 1.0)
  • strokeWeight - Specificare lo spessore della linea (in pixel)
  • fillColor - Specificare il colore esadecimale dell'area interna del perimetro (formato: "#FFFFFF")
  • fillOpacity - Specificare l'opacità del colore di riempimento (valore tra 0.0 e 1.0)
  • editable - Definire se la linea può essere modificata dall'utente (true/false)

istanza

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
});

Google Maps - Cerchio

Il cerchio supporta le seguenti proprietà:

  • center - Specificare il google.maps.LatLng del centro del cerchio
  • radius - Specificare il raggio del cerchio in metri
  • strokeColor - Specificare il colore esadecimale della linea intorno al cerchio (formato: "#FFFFFF")
  • strokeOpacity - Specificare l'opacità del colore della linea (valore tra 0.0 e 1.0)
  • strokeWeight - Specificare lo spessore della linea (in pixel)
  • fillColor - Specificare il colore esadecimale dell'area interna del cerchio (formato: "#FFFFFF")
  • fillOpacity - Specificare l'opacità del colore di riempimento (valore tra 0.0 e 1.0)
  • editable - Definire se l'utente può modificare il cerchio (true/false)

istanza

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

Google Maps - Finestra informativa

per visualizzare una finestra informativa con contenuto testuale per il marker:

istanza

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