Google Maps Lagen

谷歌地图 - 叠加层

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

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

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

谷歌地图 - 添加标记

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

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

voorbeeld

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

谷歌地图 - 标记动画

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

voorbeeld

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

谷歌地图 - 用图标替代标记

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

voorbeeld

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

谷歌地图 - 折线

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

折线支持以下属性：

  • path - 规定线的几个纬度/经度坐标
  • strokeColor - Stel de hexadecimale kleur van de lijn in (formaat: "#FFFFFF")
  • strokeOpacity - Stel de ondoorzichtigheid van de lijn in (waarde tussen 0.0 en 1.0)
  • strokeWeight - Stel de dikte van de lijn in (in pixels)
  • editable - Definieer of de lijn door de gebruiker kan worden aangepast (true/false)

voorbeeld

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  
  
  strokeWeight:2
});

Google Maps - Polygoon

Een polygoon lijkt op een lijnstuk, bestaande uit een reeks opvolgende coördinaten. Echter, een polygoon is ontworpen om het gebied binnen de gesloten lijn te definiëren.

Een polygoon bestaat uit lijnen en is van gesloten vorm (alle lijnen zijn verbonden).

De polygoon ondersteunt de volgende eigenschappen:

  • path - Stel de coördinaten van de lijn in (de eerste en laatste coördinaat zijn gelijk)
  • strokeColor - Stel de hexadecimale kleur van de lijn in (formaat: "#FFFFFF")
  • strokeOpacity - Stel de ondoorzichtigheid van de lijn in (waarde tussen 0.0 en 1.0)
  • strokeWeight - Stel de dikte van de lijn in (in pixels)
  • fillColor - Stel de hexadecimale kleur van het gebied binnen de gesloten lijn in (formaat: "#FFFFFF")
  • fillOpacity - Stel de ondoorzichtigheid van de vulkleur in (waarde tussen 0.0 en 1.0)
  • editable - Definieer of de lijn door de gebruiker kan worden aangepast (true/false)

voorbeeld

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

Google Maps - Cirkel

De cirkel ondersteunt de volgende eigenschappen:

  • center - Stel de google.maps.LatLng van het middelpunt in
  • radius - Stel de straal van de cirkel in (in meters)
  • strokeColor - Stel de hexadecimale kleur van de lijn rond de cirkel in (formaat: "#FFFFFF")
  • strokeOpacity - Stel de ondoorzichtigheid van de lijnkleur in (waarde tussen 0.0 en 1.0)
  • strokeWeight - Stel de dikte van de lijn in (in pixels)
  • fillColor - Stel de hexadecimale kleur van het gebied binnen de cirkel in (formaat: "#FFFFFF")
  • fillOpacity - Stel de ondoorzichtigheid van de vulkleur in (waarde tussen 0.0 en 1.0)
  • editable - Definieer of de gebruiker de cirkel kan aanpassen (true/false)

voorbeeld


  
  radius:20000,
  
  
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - Informatievenster

weergeeft een informatievenster met tekstinhoud voor de marker:

voorbeeld

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