Polygons

คลาสโพลีไลน์

google.maps.Polyline ชั้นเรียน

เส้นประกอบคือเส้นที่วางซ้อนของส่วนของเส้นตรงบนแผนที่

ชั้นเรียนนี้ขยายระยะเวลาถึง MVCObject

เข้าถึงโดยโทรไปที่ const {Polyline} = await google.maps.importLibrary("maps") ดูไลบรารีใน Maps JavaScript API

Polyline
Polyline([opts])
พารามิเตอร์: 
สร้างเส้นประกอบโดยใช้ PolylineOptions ที่ส่งผ่าน ซึ่งระบุทั้งเส้นทางของเส้นประกอบและรูปแบบเส้นโครงร่างที่จะใช้เมื่อวาดเส้นประกอบ คุณอาจส่งอาร์เรย์ของ LatLng หรือ MVCArray ของ LatLng เมื่อสร้างโพลีไลน์ แม้ว่าอาร์เรย์พื้นฐานจะถูกแปลงเป็น MVCArray ภายในโพลีไลน์เมื่อมีการสร้างอินสแตนซ์
getDraggable
getDraggable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
จะแสดงผลว่าผู้ใช้ลากรูปร่างนี้ได้หรือไม่
getEditable
getEditable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
แสดงผลว่าผู้ใช้สามารถแก้ไขรูปร่างนี้ได้หรือไม่
getMap
getMap()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Map|null
แสดงผลแผนที่ที่แนบรูปร่างนี้
getPath
getPath()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  MVCArray<LatLng>
เรียกข้อมูลเส้นทาง
getVisible
getVisible()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
ส่งคืนว่าโพลีนี้จะปรากฏบนแผนที่หรือไม่
setDraggable
setDraggable(draggable)
พารามิเตอร์: 
  • draggableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากรูปร่างนี้ไปบนแผนที่ได้ พร็อพเพอร์ตี้ geodesic กำหนดโหมดของการลาก
setEditable
setEditable(editable)
พารามิเตอร์: 
  • editableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขรูปร่างนี้ได้โดยลากจุดควบคุมที่แสดงที่จุดยอดและในแต่ละส่วน
setMap
setMap(map)
พารามิเตอร์: 
  • mapMap optional
ผลลัพธ์: ไม่มี
แสดงรูปร่างนี้บนแผนที่ที่ระบุ หากตั้งค่าแผนที่เป็น null รูปร่างจะถูกลบออก
setOptions
setOptions(options)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setPath
setPath(path)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
กำหนดเส้นทาง ดูรายละเอียดเพิ่มเติมได้ที่ PolylineOptions
setVisible
setVisible(visible)
พารามิเตอร์: 
  • visibleboolean
ผลลัพธ์: ไม่มี
ซ่อนโพลีนี้หากตั้งค่าเป็น false
รับค่าเดิม: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การคลิก DOM เริ่มทำงานในโพลีไลน์
contextmenu
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์เมนูตามบริบทของ DOM เริ่มทำงานใน Poyline
dblclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์ dblclick ของ DOM เริ่มทำงานใน Polyline
drag
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้ลากเส้นประกอบ
dragend
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้หยุดลากเส้นประกอบ
dragstart
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เริ่มลากเส้นประกอบ
mousedown
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การเมาส์ดาวน์ DOM เริ่มทำงานในโพลีไลน์
mousemove
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การย้ายเมาส์ DOM เริ่มทำงานในโพลีไลน์
mouseout
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเลื่อนเมาส์ออกสำหรับ Polyline
mouseover
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเมาส์โอเวอร์ของ Polyline
mouseup
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การวางเมาส์ DOM เริ่มทำงานใน Polyline
rightclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคลิกขวาที่ Polyline

อินเทอร์เฟซ PolylineOptions

อินเทอร์เฟซ google.maps.PolylineOptions

ออบเจ็กต์ PolylineOptions ซึ่งใช้กำหนดคุณสมบัติที่ตั้งค่าใน Polyline ได้

clickable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
ระบุว่า Polyline นี้จัดการเหตุการณ์เกี่ยวกับเมาส์หรือไม่
draggable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากรูปร่างนี้ไปบนแผนที่ได้ พร็อพเพอร์ตี้ geodesic กำหนดโหมดของการลาก
editable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขรูปร่างนี้ได้โดยลากจุดควบคุมที่แสดงที่จุดยอดและในแต่ละส่วน
geodesic optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เมื่อ true ขอบของรูปหลายเหลี่ยมจะถูกตีความว่าเป็นทรงกลมโลกและจะเป็นไปตามความโค้งของโลก เมื่อใช้ false ขอบของรูปหลายเหลี่ยมจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ โปรดทราบว่ารูปร่างของรูปหลายเหลี่ยมทรงกลมอาจเปลี่ยนไปเมื่อลาก เนื่องจากขนาดยังคงสัมพันธ์กับพื้นผิวของโลก
icons optional
ประเภท:  Array<IconSequence> optional
ไอคอนที่จะแสดงตามเส้นประกอบ
map optional
ประเภท:  Map optional
แผนที่ที่จะแสดงเส้นประกอบ
path optional
ประเภท:  MVCArray<LatLng>|Array<LatLng|LatLngLiteral> optional
ลำดับพิกัดของเส้นตรง คุณระบุเส้นทางนี้โดยใช้อาร์เรย์อย่างง่ายของ LatLng หรือ MVCArray ของ LatLng โปรดทราบว่าหากคุณส่งอาร์เรย์อย่างง่าย ระบบจะแปลงเป็น MVCArray การแทรกหรือการลบ LatLng ใน MVCArray จะอัปเดตเส้นประกอบบนแผนที่โดยอัตโนมัติ
strokeColor optional
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
strokeOpacity optional
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
strokeWeight optional
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
visible optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
เส้นประกอบนี้จะปรากฏในแผนที่หรือไม่
zIndex optional
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ

อินเทอร์เฟซ IconSequence

อินเทอร์เฟซ google.maps.IconSequence

อธิบายวิธีการแสดงไอคอนในบรรทัด

หากเส้นประกอบของคุณเป็นแบบภูมิศาสตร์ ระยะทางที่ระบุสำหรับทั้งออฟเซ็ตและเส้นซ้ำจะคำนวณเป็นเมตรโดยค่าเริ่มต้น การตั้งค่าออฟเซ็ตหรือทำซ้ำเป็นค่าพิกเซลจะทำให้มีการคำนวณระยะทางเป็นพิกเซลบนหน้าจอ

fixedRotation optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ไอคอนแต่ละรายการในลำดับจะมีการหมุนคงที่เหมือนกันโดยไม่คำนึงถึงมุมของขอบที่อยู่ หากเป็น false ไอคอนแต่ละไอคอนในลำดับจะหมุนตามแนวขอบ
icon optional
ประเภท:  Symbol optional
ไอคอนที่จะแสดงในบรรทัด
offset optional
ประเภท:  string optional
ค่าเริ่มต้น: '100%'
ระยะห่างจากจุดเริ่มต้นของเส้นที่จะแสดงไอคอน ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50 พิกเซล")
repeat optional
ประเภท:  string optional
ค่าเริ่มต้น: 0
ระยะห่างระหว่างไอคอนที่อยู่ติดกันบนเส้น ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50 พิกเซล") หากต้องการปิดใช้การทำซ้ำไอคอน ให้ระบุ "0"

คลาสรูปหลายเหลี่ยม

google.maps.Polygon ชั้นเรียน

รูปหลายเหลี่ยม (เช่น เส้นประกอบ) จะกำหนดชุดพิกัดที่เชื่อมโยงกันตามลำดับ นอกจากนี้ รูปหลายเหลี่ยมยังสร้างวงปิดและกำหนดพื้นที่ที่เติมสีอีกด้วย ดูตัวอย่างในคู่มือนักพัฒนาซอฟต์แวร์ เริ่มต้นด้วยรูปหลายเหลี่ยมแบบง่าย รูปหลายเหลี่ยมที่มีรู และอื่นๆ โปรดทราบว่าคุณสามารถใช้ชั้นข้อมูลเพื่อสร้างรูปหลายเหลี่ยมได้ด้วย ชั้นข้อมูลช่วยให้คุณสร้างหลุมได้ง่ายกว่าเพราะจะช่วยจัดการลำดับเส้นทางภายในและด้านนอกให้คุณ

ชั้นเรียนนี้ขยายระยะเวลาถึง MVCObject

เข้าถึงโดยโทรไปที่ const {Polygon} = await google.maps.importLibrary("maps") ดูไลบรารีใน Maps JavaScript API

Polygon
Polygon([opts])
พารามิเตอร์: 
สร้างรูปหลายเหลี่ยมโดยใช้ PolygonOptions ที่ส่งผ่าน ซึ่งระบุเส้นทางของรูปหลายเหลี่ยม รูปแบบเส้นโครงร่างสำหรับขอบของรูปหลายเหลี่ยม และรูปแบบการเติมสีสำหรับพื้นที่ภายในของรูปหลายเหลี่ยม รูปหลายเหลี่ยมอาจมีเส้นทางอย่างน้อย 1 เส้นทาง โดยแต่ละเส้นทางประกอบด้วยอาร์เรย์ LatLng คุณอาจส่งอาร์เรย์ของ LatLng หรือ MVCArray ของ LatLng เมื่อสร้างเส้นทางเหล่านี้ อาร์เรย์จะถูกแปลงเป็น MVCArray ภายในรูปหลายเหลี่ยมเมื่อมีการทำอินสแตนซ์
getDraggable
getDraggable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
จะแสดงผลว่าผู้ใช้ลากรูปร่างนี้ได้หรือไม่
getEditable
getEditable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
แสดงผลว่าผู้ใช้สามารถแก้ไขรูปร่างนี้ได้หรือไม่
getMap
getMap()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Map|null
แสดงผลแผนที่ที่แนบรูปร่างนี้
getPath
getPath()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  MVCArray<LatLng>
เรียกข้อมูลเส้นทางแรก
getPaths
getPaths()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  MVCArray<MVCArray<LatLng>>
เรียกข้อมูลเส้นทางสำหรับรูปหลายเหลี่ยมนี้
getVisible
getVisible()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
ส่งคืนว่าโพลีนี้จะปรากฏบนแผนที่หรือไม่
setDraggable
setDraggable(draggable)
พารามิเตอร์: 
  • draggableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากรูปร่างนี้ไปบนแผนที่ได้ พร็อพเพอร์ตี้ geodesic กำหนดโหมดของการลาก
setEditable
setEditable(editable)
พารามิเตอร์: 
  • editableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขรูปร่างนี้ได้โดยลากจุดควบคุมที่แสดงที่จุดยอดและในแต่ละส่วน
setMap
setMap(map)
พารามิเตอร์: 
  • mapMap optional
ผลลัพธ์: ไม่มี
แสดงรูปร่างนี้บนแผนที่ที่ระบุ หากตั้งค่าแผนที่เป็น null รูปร่างจะถูกลบออก
setOptions
setOptions(options)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setPath
setPath(path)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
กำหนดเส้นทางแรก ดูรายละเอียดเพิ่มเติมได้ที่ PolygonOptions
setPaths
setPaths(paths)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
กำหนดเส้นทางสำหรับรูปหลายเหลี่ยมนี้
setVisible
setVisible(visible)
พารามิเตอร์: 
  • visibleboolean
ผลลัพธ์: ไม่มี
ซ่อนโพลีนี้หากตั้งค่าเป็น false
รับค่าเดิม: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การคลิก DOM เริ่มทำงานบนรูปหลายเหลี่ยม
contextmenu
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์เมนูตามบริบทของ DOM เริ่มทำงานในรูปหลายเหลี่ยม
dblclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์ dblclick ของ DOM เริ่มทำงานในรูปหลายเหลี่ยม
drag
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เกิดขึ้นซ้ำๆ ขณะที่ผู้ใช้ลากรูปหลายเหลี่ยม
dragend
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้หยุดลากรูปหลายเหลี่ยม
dragstart
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เริ่มลากรูปหลายเหลี่ยม
mousedown
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การเมาส์ดาวน์ DOM เริ่มทำงานบนรูปหลายเหลี่ยม
mousemove
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การย้ายเมาส์ DOM เริ่มทำงานบนรูปหลายเหลี่ยม
mouseout
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเลื่อนเมาส์ออกสำหรับ Polygon
mouseover
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเมาส์โอเวอร์ Polygon
mouseup
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การวางเมาส์ DOM เริ่มทำงานบนรูปหลายเหลี่ยม
rightclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคลิกขวาที่รูปหลายเหลี่ยม

อินเทอร์เฟซ PolygonOptions

อินเทอร์เฟซ google.maps.PolygonOptions

วัตถุ PolygonOptions ซึ่งใช้กำหนดคุณสมบัติที่สามารถตั้งค่าบน Polygon ได้

clickable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
ระบุว่า Polygon นี้จัดการเหตุการณ์เกี่ยวกับเมาส์หรือไม่
draggable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากรูปร่างนี้ไปบนแผนที่ได้ พร็อพเพอร์ตี้ geodesic กำหนดโหมดของการลาก
editable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขรูปร่างนี้ได้โดยลากจุดควบคุมที่แสดงที่จุดยอดและในแต่ละส่วน
fillColor optional
ประเภท:  string optional
สีเติม ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
fillOpacity optional
ประเภท:  number optional
ความทึบแสงของการเติมสีระหว่าง 0.0 ถึง 1.0
geodesic optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เมื่อ true ขอบของรูปหลายเหลี่ยมจะถูกตีความว่าเป็นทรงกลมโลกและจะเป็นไปตามความโค้งของโลก เมื่อใช้ false ขอบของรูปหลายเหลี่ยมจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ โปรดทราบว่ารูปร่างของรูปหลายเหลี่ยมทรงกลมอาจเปลี่ยนไปเมื่อลาก เนื่องจากขนาดยังคงสัมพันธ์กับพื้นผิวของโลก
map optional
ประเภท:  Map optional
แผนที่ที่จะแสดงรูปหลายเหลี่ยม
paths optional
ลำดับพิกัดของพิกัดที่กำหนดวงแหวนปิด รูปหลายเหลี่ยมอาจประกอบด้วยเส้นทางอย่างน้อย 1 เส้นทาง ซึ่งต่างจากเส้นประกอบ พร็อพเพอร์ตี้เส้นทางอาจระบุอาร์เรย์ของพิกัด LatLng อย่างน้อย 1 อาร์เรย์ เส้นทางจะปิดโดยอัตโนมัติ อย่าใช้จุดยอดมุมแรกของเส้นทางซ้ำเป็นจุดยอดมุมสุดท้าย รูปหลายเหลี่ยมแบบง่ายสามารถกำหนดได้โดยใช้ LatLng อาร์เรย์เดียว รูปหลายเหลี่ยมที่ซับซ้อนมากขึ้นอาจระบุอาร์เรย์ของอาร์เรย์ ระบบจะแปลงอาร์เรย์พื้นฐานทั้งหมดเป็น MVCArray การแทรกหรือการนำ LatLng ออกจาก MVCArray จะอัปเดตรูปหลายเหลี่ยมบนแผนที่โดยอัตโนมัติ
strokeColor optional
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
strokeOpacity optional
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
strokePosition optional
ประเภท:  StrokePosition optional
ค่าเริ่มต้น: StrokePosition.CENTER
ตำแหน่งเส้นโครงร่าง
strokeWeight optional
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
visible optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
รูปหลายเหลี่ยมนี้แสดงบนแผนที่หรือไม่
zIndex optional
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ

อินเทอร์เฟซ PolyMouseEvent

อินเทอร์เฟซ google.maps.PolyMouseEvent

วัตถุนี้จะแสดงผลจากเหตุการณ์เมาส์ในเส้นประกอบและรูปหลายเหลี่ยม

อินเทอร์เฟซนี้ขยายไปถึง MapMouseEvent

edge optional
ประเภท:  number optional
ดัชนีของขอบภายในเส้นทางใต้เคอร์เซอร์เมื่อเกิดเหตุการณ์ขึ้น หากเหตุการณ์เกิดขึ้นที่จุดกึ่งกลางของรูปหลายเหลี่ยมที่แก้ไขได้
path optional
ประเภท:  number optional
ดัชนีของเส้นทางใต้เคอร์เซอร์เมื่อเกิดเหตุการณ์ขึ้น หากเหตุการณ์เกิดขึ้นบนจุดยอดมุมและรูปหลายเหลี่ยมจะแก้ไขได้ หรือundefined
vertex optional
ประเภท:  number optional
ดัชนีของจุดยอดใต้เคอร์เซอร์เมื่อเกิดเหตุการณ์ขึ้น หากเหตุการณ์เกิดขึ้นบนจุดยอดมุมและแก้ไขเส้นประกอบหรือรูปหลายเหลี่ยมได้ หากเหตุการณ์ไม่ได้เกิดขึ้นบนจุดยอด ค่าจะเป็น undefined
รับค่าเดิม: domEvent, latLng
รับค่าเดิม: stop

คลาสสี่เหลี่ยมผืนผ้า

google.maps.Rectangle ชั้นเรียน

สี่เหลี่ยมผืนผ้าวางซ้อนกัน

ชั้นเรียนนี้ขยายระยะเวลาถึง MVCObject

เข้าถึงโดยโทรไปที่ const {Rectangle} = await google.maps.importLibrary("maps") ดูไลบรารีใน Maps JavaScript API

Rectangle
Rectangle([opts])
พารามิเตอร์: 
สร้างสี่เหลี่ยมผืนผ้าโดยใช้ RectangleOptions ที่ส่งผ่าน ซึ่งระบุขอบเขตและรูปแบบ
getBounds
getBounds()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  LatLngBounds|null
แสดงขอบเขตของสี่เหลี่ยมผืนผ้านี้
getDraggable
getDraggable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
จะแสดงผลว่าผู้ใช้ลากสี่เหลี่ยมผืนผ้านี้ได้หรือไม่
getEditable
getEditable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
จะแสดงผลว่าผู้ใช้แก้ไขสี่เหลี่ยมผืนผ้านี้หรือไม่
getMap
getMap()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Map|null
แสดงแผนที่ที่แสดงรูปสี่เหลี่ยมผืนผ้านี้
getVisible
getVisible()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
ส่งคืนว่าสี่เหลี่ยมผืนผ้านี้จะปรากฏบนแผนที่หรือไม่
setBounds
setBounds(bounds)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
กำหนดขอบเขตของสี่เหลี่ยมผืนผ้านี้
setDraggable
setDraggable(draggable)
พารามิเตอร์: 
  • draggableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้จะลากสี่เหลี่ยมผืนผ้านี้บนแผนที่ได้
setEditable
setEditable(editable)
พารามิเตอร์: 
  • editableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้จะแก้ไขสี่เหลี่ยมผืนผ้านี้ได้โดยลากจุดควบคุมที่แสดงที่มุมและขอบแต่ละด้าน
setMap
setMap(map)
พารามิเตอร์: 
  • mapMap optional
ผลลัพธ์: ไม่มี
แสดงภาพสี่เหลี่ยมผืนผ้าบนแผนที่ที่ระบุ หากตั้งค่าแผนที่เป็น null รูปสี่เหลี่ยมจะถูกนำออก
setOptions
setOptions(options)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setVisible
setVisible(visible)
พารามิเตอร์: 
  • visibleboolean
ผลลัพธ์: ไม่มี
ซ่อนสี่เหลี่ยมผืนผ้านี้หากตั้งค่าเป็น false
รับค่าเดิม: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
bounds_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทำงานเมื่อขอบเขตของรูปสี่เหลี่ยมผืนผ้ามีการเปลี่ยนแปลง
click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การคลิก DOM เริ่มทำงานในสี่เหลี่ยมผืนผ้า
contextmenu
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์เมนูตามบริบทของ DOM เริ่มทำงานในสี่เหลี่ยมผืนผ้า
dblclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์ dblclick ของ DOM เริ่มทำงานในสี่เหลี่ยมผืนผ้า
drag
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นซ้ำๆ ขณะที่ผู้ใช้ลากสี่เหลี่ยมผืนผ้า
dragend
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้หยุดลากสี่เหลี่ยมผืนผ้า
dragstart
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เริ่มลากสี่เหลี่ยม
mousedown
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์เมาส์ดาวน์ของ DOM เริ่มทำงานบนสี่เหลี่ยมผืนผ้า
mousemove
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การย้ายเมาส์ DOM เริ่มทำงานในสี่เหลี่ยมผืนผ้า
mouseout
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเมาส์เอาต์รูปสี่เหลี่ยมผืนผ้า
mouseover
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อมีเมาส์โอเวอร์รูปสี่เหลี่ยมผืนผ้า
mouseup
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การเมาส์ DOM เริ่มทำงานในสี่เหลี่ยมผืนผ้า
rightclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคลิกขวาที่รูปสี่เหลี่ยมผืนผ้า

อินเทอร์เฟซRectangleOptions

อินเทอร์เฟซ google.maps.RectangleOptions

วัตถุ RectangleOptions เพื่อกำหนดคุณสมบัติที่สามารถตั้งค่าในรูปสี่เหลี่ยมผืนผ้า

bounds optional
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
ขอบเขต
clickable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
ระบุว่า Rectangle นี้จัดการเหตุการณ์เกี่ยวกับเมาส์หรือไม่
draggable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้จะลากสี่เหลี่ยมผืนผ้านี้บนแผนที่ได้
editable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้จะแก้ไขสี่เหลี่ยมผืนผ้านี้ได้โดยลากจุดควบคุมที่แสดงที่มุมและขอบแต่ละด้าน
fillColor optional
ประเภท:  string optional
สีเติม ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
fillOpacity optional
ประเภท:  number optional
ความทึบแสงของการเติมสีระหว่าง 0.0 ถึง 1.0
map optional
ประเภท:  Map optional
แผนที่ที่จะแสดงสี่เหลี่ยมผืนผ้า
strokeColor optional
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
strokeOpacity optional
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
strokePosition optional
ประเภท:  StrokePosition optional
ค่าเริ่มต้น: StrokePosition.CENTER
ตำแหน่งเส้นโครงร่าง
strokeWeight optional
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
visible optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
สี่เหลี่ยมผืนผ้านี้จะปรากฏบนแผนที่หรือไม่
zIndex optional
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ

แวดวง ชั้นเรียน

google.maps.Circle ชั้นเรียน

วงกลมบนพื้นผิวโลก หรือที่เรียกว่า "หมวกทรงกลม"

ชั้นเรียนนี้ขยายระยะเวลาถึง MVCObject

เข้าถึงโดยโทรไปที่ const {Circle} = await google.maps.importLibrary("maps") ดูไลบรารีใน Maps JavaScript API

Circle
Circle([circleOrCircleOptions])
พารามิเตอร์: 
สร้างวงกลมโดยใช้ CircleOptions ที่ส่งผ่านซึ่งระบุจุดศูนย์กลาง รัศมี และรูปแบบ
getBounds
getBounds()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  LatLngBounds|null
รับ LatLngBounds ของแวดวงนี้
getCenter
getCenter()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  LatLng|null
แสดงจุดศูนย์กลางของวงกลมนี้
getDraggable
getDraggable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
จะแสดงผลว่าผู้ใช้ลากวงกลมนี้ได้หรือไม่
getEditable
getEditable()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
แสดงผลว่าผู้ใช้แก้ไขวงกลมนี้ได้หรือไม่
getMap
getMap()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Map|null
แสดงแผนที่ที่วงกลมนี้ปรากฏ
getRadius
getRadius()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  number
แสดงรัศมีของวงกลมนี้ (หน่วยเป็นเมตร)
getVisible
getVisible()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  boolean
ส่งคืนว่าวงกลมนี้สามารถมองเห็นบนแผนที่หรือไม่
setCenter
setCenter(center)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
ตั้งศูนย์กลางของวงกลมนี้
setDraggable
setDraggable(draggable)
พารามิเตอร์: 
  • draggableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากวงกลมนี้บนแผนที่ได้
setEditable
setEditable(editable)
พารามิเตอร์: 
  • editableboolean
ผลลัพธ์: ไม่มี
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขวงกลมนี้ได้โดยลากจุดควบคุมที่แสดงที่กึ่งกลางและรอบเส้นรอบวงของวงกลม
setMap
setMap(map)
พารามิเตอร์: 
  • mapMap optional
ผลลัพธ์: ไม่มี
แสดงวงกลมบนแผนที่ที่ระบุ หากตั้งค่าแผนที่เป็น null วงกลมจะถูกลบออก
setOptions
setOptions(options)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setRadius
setRadius(radius)
พารามิเตอร์: 
  • radiusnumber
ผลลัพธ์: ไม่มี
กำหนดรัศมีของวงกลมนี้ (หน่วยเป็นเมตร)
setVisible
setVisible(visible)
พารามิเตอร์: 
  • visibleboolean
ผลลัพธ์: ไม่มี
ซ่อนแวดวงนี้หากตั้งค่าเป็น false
รับค่าเดิม: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
center_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเกิดขึ้นเมื่อศูนย์กลางของวงกลมมีการเปลี่ยนแปลง
click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การคลิก DOM เริ่มทำงานในแวดวง
dblclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์ dblclick ของ DOM เริ่มทำงานในแวดวง
drag
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นซ้ำๆ ขณะที่ผู้ใช้ลากวงกลม
dragend
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้หยุดลากวงกลม
dragstart
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เริ่มลากวงกลม
mousedown
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การเลื่อนเมาส์ดาวน์ DOM เริ่มทำงานในแวดวง
mousemove
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การย้ายเมาส์ DOM เริ่มทำงานในแวดวง
mouseout
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเลื่อนเมาส์ออกเป็นวงกลม
mouseover
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้เริ่มทำงานเมื่อเมาส์โอเวอร์เป็นวงกลม
mouseup
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อเหตุการณ์การวางเมาส์ DOM เริ่มทำงานในแวดวง
radius_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเกิดขึ้นเมื่อรัศมีของวงกลมมีการเปลี่ยนแปลง
rightclick
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคลิกขวาที่วงกลม

อินเทอร์เฟซ CircleOptions

อินเทอร์เฟซ google.maps.CircleOptions

วัตถุ CircleOptions ที่กำหนดคุณสมบัติที่สามารถตั้งค่าใน Circle ได้

center optional
ประเภท:  LatLng|LatLngLiteral optional
กึ่งกลางของวงกลม
clickable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
ระบุว่า Circle นี้จัดการเหตุการณ์เกี่ยวกับเมาส์หรือไม่
draggable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้จะสามารถลากวงกลมนี้บนแผนที่ได้
editable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากตั้งค่าเป็น true ผู้ใช้สามารถแก้ไขวงกลมนี้ได้โดยลากจุดควบคุมที่แสดงที่กึ่งกลางและรอบเส้นรอบวงของวงกลม
fillColor optional
ประเภท:  string optional
สีเติม ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
fillOpacity optional
ประเภท:  number optional
ความทึบแสงของการเติมสีระหว่าง 0.0 ถึง 1.0
map optional
ประเภท:  Map optional
แผนที่ที่จะแสดงวงกลม
radius optional
ประเภท:  number optional
รัศมีเป็นเมตรบนพื้นผิวโลก
strokeColor optional
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
strokeOpacity optional
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
strokePosition optional
ประเภท:  StrokePosition optional
ค่าเริ่มต้น: StrokePosition.CENTER
ตำแหน่งเส้นโครงร่าง
strokeWeight optional
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
visible optional
ประเภท:  boolean optional
ค่าเริ่มต้น: true
วงกลมนี้จะปรากฏบนแผนที่หรือไม่
zIndex optional
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ

ค่าคงที่StrokePosition

ค่าคงที่ google.maps.StrokePosition

ตำแหน่งที่เป็นไปได้ของเส้นโครงร่างบนรูปหลายเหลี่ยม

เข้าถึงโดยโทรไปที่ const {StrokePosition} = await google.maps.importLibrary("maps") ดูไลบรารีใน Maps JavaScript API

CENTER เส้นโครงร่างจะอยู่กึ่งกลางบนเส้นทางของรูปหลายเหลี่ยม โดยมีครึ่งหนึ่งของเส้นโครงร่างภายในรูปหลายเหลี่ยมและเส้นโครงร่างอีกครึ่งหนึ่งอยู่นอกรูปหลายเหลี่ยม
INSIDE เส้นโครงร่างอยู่ภายในรูปหลายเหลี่ยม
OUTSIDE เส้นโครงร่างอยู่นอกรูปหลายเหลี่ยม