Latest web development tutorials

Google 地圖疊加層

在Google地圖中添加一個標記

Google 地圖- 疊加層

疊加層是地圖上綁定到經度/緯度坐標的對象，會隨您拖動或縮放地圖而移動。

Google 地圖API 有如下幾種疊加層：

  • 地圖上的點使用標記來顯示，通常顯示自定義圖標。 標記是GMarker 類型的對象，並且可以利用GIcon 類型的對象來自定義圖標。
  • 地圖上的線使用折線（表示點的集合）來顯示。 線是類型為GPolyline 的對象。
  • 地圖上的區域顯示為多邊形（如果是任意形狀的區域）或底面疊加層（如果是矩形區域）。 多邊形類似於閉合的折線，因此可以是任何形狀。 地面疊加層通常用於地圖上與圖塊有直接或間接關聯的區域。
  • 地圖本身使用圖塊疊加層顯示。 如果您有自己的系列圖塊，可以使用GTileLayerOverlay 類來改變地圖上已有的圖塊，甚至可以使用GMapType 來創建您自己的地圖類型。
  • 信息窗口也是一種特殊的疊加層。 但是請注意，信息窗口會自動添加到地圖中，並且地圖只能添加一個類型為GInfoWindow 的對象。

Google 地圖- 添加標記

記標識地圖上的點。 默認情況下，它們使用G_DEFAULT_ICON（您也可以指定自定義圖標）。 GMarker 構造函數將GLatLng 和GMarkerOptions（可選）對像作為參數。

標記設計為可交互。 例如，默認情況下它們接收"click" 事件，常用於在事件偵聽器中打開信息窗口。

通過setMap() 方法在地圖上添加標記:

實例

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

marker.setMap(map);

嘗試一下»

Google 地圖- 可拖動的標記

以下實例將介紹如何使用animation 屬性來拖動標記:

實例

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

marker.setMap(map);

嘗試一下»

Google 地圖- 圖標

標記可以用自定義的新圖標來顯示，以替代默認圖標:

實例

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

marker.setMap(map);

嘗試一下»

Google 地圖- 折線

GPolyline 對象可在地圖上創建線性疊加層。 GPolyline 包括一系列點，並創建一系列有序連接這些點的線段。

折線支持以下屬性：

  • path - 指定了多個直線的緯度/經度坐標
  • 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
});

嘗試一下»

Google 地圖- 多邊形

GPolygon 對像類似於GPolyline 對象，因為它們都包括一系列有序的點。 但是，多邊形不像折線一樣有兩個端點，而是設計為定義形成閉環的區域。

和折線一樣，您可以自定義多邊形邊（線）的顏色、粗細和透明度，以及封閉的填充區域的顏色和透明度。 顏色應是十六進制數字HTML 樣式。

多邊形支持以下屬性：

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

嘗試一下»

Google 地圖- 圓

圓支持以下屬性：

  • center - 指定圓的中心點參數google.maps.LatLng
  • radius - 指定圓的半徑，以米為單位
  • strokeColor - 指定弧線的十六進制顏色值(格式: "#FFFFFF")
  • strokeOpacity - 指定弧線的透明度(該值為0.0 到1.0)
  • strokeWeight -定義線的寬度,以像素為單位。
  • fillColor - 指定圓的十六進制顏色值填充值(格式: "#FFFFFF")
  • fillOpacity - 指定填充顏色的透明度(該值為 0.0 到1.0)
  • 定義用戶是否可編輯直線(true/false)

實例

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

嘗試一下»

Google 地圖- 信息窗口

在一個標記上顯示一個文本信息窗口：

實例

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

infowindow.open(map,marker);

嘗試一下»

Google 地圖- 疊加層參考手冊

Google Maps API參考手冊 .