選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP How To W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Google Maps 覆蓋層


Google Maps - 覆蓋層

覆蓋層是地圖上的物件,它們繫結到經緯度座標。

Google Maps 有幾種型別的覆蓋層

  • 標記 - 地圖上的單個位置。標記還可以顯示自定義圖示影像
  • 折線 - 地圖上的一系列直線
  • 多邊形 - 地圖上的一系列直線,並且形狀是“封閉的”
  • 圓形和矩形
  • 資訊視窗 - 在地圖頂部顯示一個彈出氣球中的內容
  • 自定義覆蓋層

Google Maps - 新增標記

Marker 建構函式建立一個標記。請注意,必須設定 position 屬性才能顯示標記。

使用 setMap() 方法將標記新增到地圖

示例

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

marker.setMap(map);


Google Maps - 動畫標記

下面的示例演示如何使用 animation 屬性為標記新增動畫

示例

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

marker.setMap(map);

Google Maps - 圖示而非標記

下面的示例指定使用影像(圖示)而不是預設標記

示例

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

marker.setMap(map);

Google Maps - 折線

Polyline 是在有序序列中的一系列座標繪製的線。

折線支援以下屬性

  • 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 Maps - 多邊形

Polygon 類似於 Polyline,因為它由有序序列中的一系列座標組成。但是,多邊形設計用於定義閉環內的區域。

多邊形由直線組成,並且形狀是“封閉的”(所有直線都連線在一起)。

多邊形支援以下屬性

  • path - 為線指定多個 LatLng 座標(第一個和最後一個座標相等)
  • 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 Maps - 圓形

圓形支援以下屬性

  • center - 指定圓心的 google.maps.LatLng
  • radius - 指定圓的半徑(以米為單位)
  • strokeColor - 為圓形周圍的線指定十六進位制顏色(格式:“#FFFFFF”)
  • strokeOpacity - 指定描邊顏色的透明度(0.0 到 1.0 之間的值)
  • strokeWeight - 以畫素為單位指定線的描邊粗細
  • fillColor - 為圓形內的區域指定十六進位制顏色(格式:“#FFFFFF”)
  • fillOpacity - 指定填充顏色的透明度(0.0 到 1.0 之間的值)
  • editable - 定義圓形是否可由使用者編輯(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 Maps - 資訊視窗

為標記顯示帶有某些文字內容的資訊視窗

示例

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

infowindow.open(map,marker);

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援