Lager Google Maps

谷歌地图 - 叠加层

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

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

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

谷歌地图 - 添加标记

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

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

exempel

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

谷歌地图 - 标记动画

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

exempel

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

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

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

exempel

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

谷歌地图 - 折线

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

折线支持以下属性：

  • path - 规定线的几个纬度/经度坐标
  • strokeColor - Ange sexadekimal färg för linjesträckan (format: "#FFFFFF")
  • strokeOpacity - Ange genomskinligheten för linjesträckan (värde mellan 0.0 och 1.0)
  • strokeWeight - Ange tjockleken på linjesträckan i pixlar
  • editable - Definiera om denna linje kan redigeras av användaren (sant/falskt)

exempel

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

Google Maps - Polygon

Polygon liknar en polylinje, den består av en uppsättning koordinater i följd. Men polygon är designad för att definiera ett område inom en stängd kurva.

Polygon är bildade av rätlinjer och är "stängda" (alla linjer är anslutna)

Polygon stöder följande egenskaper:

  • path - Ange en uppsättning latituder/longituder för linjens koordinater (den första och sista koordinaten är lika)
  • strokeColor - Ange sexadekimal färg för linjesträckan (format: "#FFFFFF")
  • strokeOpacity - Ange genomskinligheten för linjesträckan (värde mellan 0.0 och 1.0)
  • strokeWeight - Ange tjockleken på linjesträckan i pixlar
  • fillColor - Ange sexadekimal färg för området inom stängda regionen (format: "#FFFFFF")
  • fillOpacity - Ange genomskinligheten för färgen på fyllningen (värde mellan 0.0 och 1.0)
  • editable - Definiera om denna linje kan redigeras av användaren (sant/falskt)

exempel

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 - Cirkel

Cirkeln stöder följande egenskaper:

  • center - Ange google.maps.LatLng för cirkelns mittpunkt
  • radius - Ange cirkelns radie i meter
  • strokeColor - Ange sexadekimal färg för linjen runt cirkeln (format: "#FFFFFF")
  • strokeOpacity - Ange genomskinligheten för färgen på linjesträckan (värde mellan 0.0 och 1.0)
  • strokeWeight - Ange tjockleken på linjesträckan i pixlar
  • fillColor - Ange sexadekimal färg för området inom cirkeln (format: "#FFFFFF")
  • fillOpacity - Ange genomskinligheten för färgen på fyllningen (värde mellan 0.0 och 1.0)
  • editable - Definiera om användaren kan redigera cirkeln (sant/falskt)

exempel

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

Google Maps - Informationstavla

visar en informationstavla med textinnehåll för marker:

exempel

var infowindow = new google.maps.InfoWindow({
  content:"Hej Värld!"
});
infowindow.open(map,marker);