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
content
ประเภท:  Node optional
element
ประเภท:  HTMLElement
ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM ที่สำรองมุมมอง
BetagmpClickable
ประเภท:  boolean optional
gmpDraggable
ประเภท:  boolean optional
map
ประเภท:  Map optional
position
แอตทริบิวต์ HTML:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
ประเภท:  string
แอตทริบิวต์ HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
ประเภท:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • typestring สตริงโดยพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการฟัง
  • listenerEventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • optionsboolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
มูลค่าการคืนสินค้า:  void
ตั้งค่าฟังก์ชันที่จะถูกเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
addListener
addListener(eventName, handler)
พารามิเตอร์: 
  • eventNamestring เหตุการณ์ที่สังเกตได้
  • handlerFunction ฟังก์ชันสำหรับจัดการเหตุการณ์
ผลลัพธ์:  MapsEventListener Listener เหตุการณ์ที่เกิดขึ้น
เพิ่มฟังก์ชัน Listener ที่ระบุให้กับชื่อเหตุการณ์ที่ระบุในระบบเหตุการณ์ของ Maps
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • typestring สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listenerEventListener|EventListenerObject Listener เหตุการณ์ของเครื่องจัดการเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • optionsboolean|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 ก่อนหน้าดูว่างเปล่า

BetagmpClickable optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากเป็น true AdvancedMarkerElement จะสามารถคลิกได้และทริกเกอร์เหตุการณ์ gmp-click และจะเป็นแบบอินเทอร์แอกทีฟเพื่อวัตถุประสงค์ในการเข้าถึง (เช่น การอนุญาตให้ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ผ่านแป้นลูกศร)
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
borderColor
ประเภท:  string optional
element
ประเภท:  HTMLElement
ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM ที่สำรองมุมมอง
glyph
ประเภท:  string|Element|URL optional
glyphColor
ประเภท:  string optional
scale
ประเภท:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
มูลค่าการคืนสินค้า:  void
ฟังก์ชันนี้ยังไม่พร้อมให้บริการ
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • typestring สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listenerEventListener|EventListenerObject Listener เหตุการณ์ของเครื่องจัดการเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • optionsboolean|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
ขนาดของหมุด