Google-Maps-Overlay

Google Maps - 叠加层

叠加层是地图上绑定到纬度/经度坐标的对象。

Google Maps 有多种类型的叠加层：

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

Google Maps - 添加标记

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

请使用 setMap() 方法将标记添加到地图：

Instanz

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

Google Maps - 标记动画

下面的例子展示了如何使用 animation 属性为标记设置动画：

Instanz

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
content:"Hallo Welt!"
marker.setMap(map);

Google Maps - 替换标记图标

下面的例子规定要使用的图像（图标）来代替默认标记：

Instanz

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
content:"Hallo Welt!"
marker.setMap(map);

Google Maps - Polyline

折线是通过按顺序排列的一系列坐标绘制的线。

折线支持以下属性：

• path - 规定线的几个纬度/经度坐标
• strokeColor - Bestimme die Hexadezimalfarbe der Linie (Format: "#FFFFFF")
• strokeOpacity - Bestimme die Deckkraft der Linie (Wert zwischen 0.0 und 1.0)
• strokeWeight - Bestimme die Dicke der Linie (in Pixeln)
• editable - Definiere, ob die Linie vom Benutzer bearbeitet werden kann (true/false)

Instanz

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

Google Maps - Polygon

Ein Polygon ähnelt einer Polyline, es besteht aus einer Reihe von in der Reihenfolge angeordneten Koordinaten. Allerdings ist ein Polygon so konzipiert, dass es den Bereich innerhalb des geschlossenen Bereichs definiert.

Ein Polygon besteht aus Linien und hat die Form "geschlossen" (alle Linien sind verbunden).

Ein Polygon unterstützt die folgenden Eigenschaften:

• path - Bestimme die Koordinaten von mehreren Breiten- und Längengraden der Linie (der erste und letzte Koordinate sind gleich)
• strokeColor - Bestimme die Hexadezimalfarbe der Linie (Format: "#FFFFFF")
• strokeOpacity - Bestimme die Deckkraft der Linie (Wert zwischen 0.0 und 1.0)
• strokeWeight - Bestimme die Dicke der Linie (in Pixeln)
• fillColor - Bestimme die Hexadezimalfarbe des Innerraums des geschlossenen Bereichs (Format: "#FFFFFF")
• fillOpacity - Bestimme die Deckkraft der Füllfarbe (Wert zwischen 0.0 und 1.0)
• editable - Definiere, ob die Linie vom Benutzer bearbeitet werden kann (true/false)

Instanz

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
content:"Hallo Welt!"

Google Maps - Kreis

Ein Kreis unterstützt die folgenden Eigenschaften:

• center - Bestimme die google.maps.LatLng des Mittelpunkts
• radius - Bestimme den Radius des Kreises in Metern
• strokeColor - Bestimme die Hexadezimalfarbe der Linie um den Kreis (Format: "#FFFFFF")
• strokeOpacity - Bestimme die Deckkraft der Linienfarbe (Wert zwischen 0.0 und 1.0)
• strokeWeight - Bestimme die Dicke der Linie (in Pixeln)
• fillColor - Bestimme die Hexadezimalfarbe des Innerraums des Kreises (Format: "#FFFFFF")
• fillOpacity - Bestimme die Deckkraft der Füllfarbe (Wert zwischen 0.0 und 1.0)
• editable - Definiere, ob der Benutzer den Kreis bearbeiten kann (true/false)

Instanz

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

Google Maps - Informationsoberfläche

Zeige eine Informationsoberfläche mit Textinhalten für den Marker an:

Instanz

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
content:"Hallo Welt!"
});