Google 地圖疊加層 · W3School Javascript & jQuery 教程

# 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 參考手冊](google-maps-ref.html).