Advanced Markers

คลาส AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement ชั้นเรียน

แสดงตำแหน่งบนแผนที่ โปรดทราบว่าต้องตั้งค่า position เพื่อให้ AdvancedMarkerElement แสดง

หมายเหตุ: การใช้งานเป็นเว็บคอมโพเนนต์ (เช่น การใช้องค์ประกอบ HTML ที่กำหนดเองของ <gmp-advanced-marker> จะใช้ได้ใน v=beta เท่านั้น)

องค์ประกอบที่กำหนดเอง:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

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

ชั้นเรียนนี้ใช้ AdvancedMarkerElementOptions

เข้าถึงโดยโทรไปที่ const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") ดูไลบรารีใน Maps JavaScript API
AdvancedMarkerElement
AdvancedMarkerElement([options])
พารามิเตอร์: 
สร้าง AdvancedMarkerElement ด้วยตัวเลือกที่ระบุไว้ หากระบุแผนที่ไว้ ระบบจะเพิ่ม AdvancedMarkerElement ลงในแผนที่เมื่อสร้าง
collisionBehavior
ประเภท:  CollisionBehavior optional
ดูAdvancedMarkerElementOptions.collisionBehavior
content
ประเภท:  Node optional
ดูAdvancedMarkerElementOptions.content
element
ประเภท:  HTMLElement
ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM สนับสนุนมุมมอง
gmpDraggable
ประเภท:  boolean optional
ดูAdvancedMarkerElementOptions.gmpDraggable
map
ประเภท:  Map optional
ดูAdvancedMarkerElementOptions.map
position
ดูAdvancedMarkerElementOptions.position
แอตทริบิวต์ HTML:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
ประเภท:  string
ดูAdvancedMarkerElementOptions.title
แอตทริบิวต์ HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
ประเภท:  number optional
ดูAdvancedMarkerElementOptions.zIndex
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการรับ
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive เท่านั้น
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะถูกเรียกเมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย โปรดดู addEventListener
addListener
addListener(eventName, handler)
พารามิเตอร์: 
  • eventName:  string เหตุการณ์ที่สังเกตได้
  • handler:  Function ฟังก์ชันสำหรับจัดการเหตุการณ์
ผลลัพธ์:  MapsEventListener Listener เหตุการณ์ที่เกิดขึ้น
เพิ่มฟังก์ชัน Listener ที่ระบุให้กับชื่อเหตุการณ์ที่ระบุในระบบเหตุการณ์ของ Maps
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนกับ addEventListener ก่อนหน้านี้ออกจากเป้าหมาย โปรดดู removeEventListener
click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการคลิกองค์ประกอบ AdvancedMarkerElement

ไม่สามารถใช้ได้กับ addEventListener() (ใช้ gmp-click แทน)
drag
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นซ้ำๆ ขณะที่ผู้ใช้ลาก AdvancedMarkerElement

ไม่มีให้บริการใน addEventListener()
dragend
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้หยุดลาก AdvancedMarkerElement

ไม่มีให้บริการใน addEventListener()
dragstart
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เริ่มลาก AdvancedMarkerElement

ไม่มีให้บริการใน addEventListener()
Betagmp-click
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการคลิกองค์ประกอบ AdvancedMarkerElement ใช้กับ addEventListener() ได้ดีที่สุด (แทน addListener())

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

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

ตัวเลือกสำหรับการสร้าง AdvancedMarkerElement
collisionBehavior optional
ประเภท:  CollisionBehavior optional
การแจกแจงที่ระบุลักษณะการทำงานของ AdvancedMarkerElement เมื่อขัดแย้งกับ AdvancedMarkerElement อื่น หรือกับป้ายกำกับแผนที่ฐานบนแผนที่เวกเตอร์

หมายเหตุ: การชนกันของ AdvancedMarkerElement ถึง AdvancedMarkerElement ใช้งานได้ทั้งบนแผนที่แรสเตอร์และเวกเตอร์ อย่างไรก็ตาม AdvancedMarkerElement การชนของป้ายกำกับของแผนที่ฐานจะทำงานได้บนแผนที่เวกเตอร์เท่านั้น
content optional
ประเภท:  Node optional
ค่าเริ่มต้น: PinElement.element
องค์ประกอบ DOM สนับสนุนภาพของ AdvancedMarkerElement

หมายเหตุ: AdvancedMarkerElement จะไม่โคลนองค์ประกอบ DOM ที่ส่งผ่าน เมื่อส่งองค์ประกอบ DOM ไปยัง AdvancedMarkerElement การส่งองค์ประกอบ DOM เดียวกันไปยัง AdvancedMarkerElement อีกรายการจะย้ายองค์ประกอบ DOM และทำให้ AdvancedMarkerElement ก่อนหน้าดูว่างเปล่า
gmpDraggable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากเป็น true คุณจะลาก AdvancedMarkerElement ได้

หมายเหตุ: คุณจะลาก AdvancedMarkerElement ที่มีระดับความสูงไม่ได้
map optional
ประเภท:  Map optional
แผนที่ที่จะแสดง AdvancedMarkerElement ต้องมีแผนที่เพื่อแสดง AdvancedMarkerElement และสามารถหาได้โดยการตั้งค่า AdvancedMarkerElement.map หากไม่ได้ระบุไว้ ณ การก่อสร้าง
position optional
ตั้งค่าตำแหน่งของ AdvancedMarkerElement AdvancedMarkerElement อาจสร้างขึ้นโดยไม่มีตำแหน่ง แต่จะไม่แสดงจนกว่าจะมีการระบุตำแหน่ง ตัวอย่างเช่น ตามการกระทำหรือตัวเลือกของผู้ใช้ คุณระบุตำแหน่งของ AdvancedMarkerElement ได้โดยการตั้งค่า AdvancedMarkerElement.position หากไม่ได้ระบุในการก่อสร้าง

หมายเหตุ: AdvancedMarkerElement ที่มีระดับความสูงจะใช้ได้เฉพาะบนแผนที่เวกเตอร์เท่านั้น
title optional
ประเภท:  string optional
ข้อความเมื่อวางเมาส์เหนือ หากมี ระบบจะเพิ่มข้อความการช่วยเหลือพิเศษ (เช่น เพื่อใช้กับโปรแกรมอ่านหน้าจอ) ลงใน AdvancedMarkerElement ด้วยค่าที่ระบุ
zIndex optional
ประเภท:  number optional
AdvancedMarkerElement ทั้งหมดจะแสดงบนแผนที่ตามลำดับ zIndex โดยค่าที่สูงกว่าจะแสดงข้างหน้า AdvancedMarkerElement โดยมีค่าต่ำกว่า โดยค่าเริ่มต้น AdvancedMarkerElement จะแสดงตามตำแหน่งแนวตั้งบนหน้าจอ โดย AdvancedMarkerElement ด้านล่างจะปรากฏด้านหน้าของ AdvancedMarkerElement ที่ห่างจากหน้าจอ โปรดทราบว่า zIndex ยังใช้เพื่อช่วยกำหนดลำดับความสำคัญระหว่างเครื่องหมายขั้นสูง CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY อีกด้วย ค่า zIndex ที่สูงกว่าบ่งบอกถึงลำดับความสำคัญที่สูงกว่า

คลาส AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent ชั้นเรียน

เหตุการณ์นี้สร้างขึ้นจากการคลิกเครื่องหมายขั้นสูง เข้าถึงตำแหน่งของเครื่องหมายด้วย event.target.position

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

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

คลาส PinElement

google.maps.marker.PinElement ชั้นเรียน

PinElement แสดงองค์ประกอบ DOM ที่ประกอบด้วยรูปร่างและรูปอักขระ รูปร่างมีรูปแบบบอลลูนเหมือนกับที่เห็นใน AdvancedMarkerElement เริ่มต้น รูปอักขระคือองค์ประกอบ DOM ที่ไม่บังคับซึ่งแสดงในรูปร่างบอลลูน PinElement อาจมีสัดส่วนภาพแตกต่างกันไปตามPinElement.scale

หมายเหตุ: ยังไม่รองรับการใช้งานเป็นคอมโพเนนต์เว็บ (เช่น การใช้งานเป็นคลาสย่อยของ HTMLElement หรือผ่าน HTML)

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

ชั้นเรียนนี้ใช้ PinElementOptions

เข้าถึงโดยโทรไปที่ const {PinElement} = await google.maps.importLibrary("marker") ดูไลบรารีใน Maps JavaScript API
PinElement
PinElement([options])
พารามิเตอร์: 
background
ประเภท:  string optional
ดูPinElementOptions.background
borderColor
ประเภท:  string optional
ดูPinElementOptions.borderColor
element
ประเภท:  HTMLElement
ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM สนับสนุนมุมมอง
glyph
ประเภท:  string|Element|URL optional
ดูPinElementOptions.glyph
glyphColor
ประเภท:  string optional
ดูPinElementOptions.glyphColor
scale
ประเภท:  number optional
ดูPinElementOptions.scale
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
ค่าที่ส่งคืน:  void
ฟังก์ชันนี้ยังไม่พร้อมใช้งาน
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนกับ addEventListener ก่อนหน้านี้ออกจากเป้าหมาย โปรดดู removeEventListener

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

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

ตัวเลือกสำหรับการสร้าง PinElement
background optional
ประเภท:  string optional
สีพื้นหลังของรูปร่างหมุด รองรับค่าสี CSS ทั้งหมด
borderColor optional
ประเภท:  string optional
สีเส้นขอบของรูปร่างหมุด รองรับค่าสี CSS ทั้งหมด
glyph optional
ประเภท:  string|Element|URL optional
องค์ประกอบ DOM ที่แสดงในหมุด
glyphColor optional
ประเภท:  string optional
สีของรูปอักขระ รองรับค่าสี CSS ทั้งหมด
scale optional
ประเภท:  number optional
ค่าเริ่มต้น: 1
ขนาดของหมุด