Advanced Markers

AdvancedMarkerElement class

google.maps.marker.AdvancedMarkerElement class

แสดงตำแหน่งบนแผนที่ โปรดทราบว่าต้องตั้งค่า 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]) พารามิเตอร์:  options:  AdvancedMarkerElementOptions optional สร้าง AdvancedMarkerElement ด้วยตัวเลือกที่ระบุ หากระบุแผนที่ ระบบจะเพิ่ม AdvancedMarkerElement ลงในแผนที่เมื่อมีการเริ่มก่อสร้าง

พร็อพเพอร์ตี้
collisionBehavior	ประเภท:  CollisionBehavior optional ดูAdvancedMarkerElementOptions.collisionBehavior
content	ประเภท:  Node optional ดูAdvancedMarkerElementOptions.content
element	ประเภท:  HTMLElement ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM ที่รองรับมุมมอง
gmpClickable	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta ประเภท:  boolean optional ดูAdvancedMarkerElementOptions.gmpClickable
gmpDraggable	ประเภท:  boolean optional ดูAdvancedMarkerElementOptions.gmpDraggable
map	ประเภท:  Map optional ดูAdvancedMarkerElementOptions.map
position	ประเภท:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ดู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

เมธอด
addEventListener	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
addListener	addListener(eventName, handler) พารามิเตอร์:  eventName:  string เหตุการณ์ที่สังเกตได้ handler:  Function ฟังก์ชันสำหรับจัดการเหตุการณ์ ผลลัพธ์:  MapsEventListener Listener เหตุการณ์ที่ได้ เพิ่มฟังก์ชัน Listener ที่ระบุไปยังชื่อเหตุการณ์ที่ระบุในระบบเหตุการณ์ของ Maps
removeEventListener	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

กิจกรรม
click	function(event) อาร์กิวเมนต์:  event:  MapMouseEvent เหตุการณ์นี้จะเริ่มต้นเมื่อมีการคลิกองค์ประกอบ AdvancedMarkerElement ใช้กับ addEventListener() ไม่ได้ (ใช้ gmp-click แทน)
drag	function(event) อาร์กิวเมนต์:  event:  MapMouseEvent เหตุการณ์นี้จะทริกเกอร์ซ้ำๆ ขณะที่ผู้ใช้ลาก AdvancedMarkerElement ไม่พร้อมใช้งานกับ addEventListener()
dragend	function(event) อาร์กิวเมนต์:  event:  MapMouseEvent เหตุการณ์นี้จะเริ่มต้นเมื่อผู้ใช้หยุดลาก AdvancedMarkerElement ไม่พร้อมใช้งานกับ addEventListener()
dragstart	function(event) อาร์กิวเมนต์:  event:  MapMouseEvent เหตุการณ์นี้จะเริ่มต้นเมื่อผู้ใช้เริ่มลาก AdvancedMarkerElement ไม่พร้อมใช้งานกับ addEventListener()
gmp-click	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta function(event) อาร์กิวเมนต์:  event:  AdvancedMarkerClickEvent เหตุการณ์นี้จะเริ่มต้นเมื่อมีการคลิกองค์ประกอบ AdvancedMarkerElement เหมาะที่จะใช้กับ addEventListener() (แทน addListener())

AdvancedMarkerElementOptions interface

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 ก่อนหน้าดูว่างเปล่า
gmpClickable optional	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta ประเภท:  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	ประเภท:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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 class

google.maps.marker.AdvancedMarkerClickEvent class

หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta

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

คลาสนี้ขยายจาก Event

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

PinElement class

google.maps.marker.PinElement class

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

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

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ PinElementOptions

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

ผู้ผลิต
PinElement	PinElement([options]) พารามิเตอร์:  options:  PinElementOptions optional

พร็อพเพอร์ตี้
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

เมธอด
addEventListener	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string listener:  EventListener|EventListenerObject options:  boolean|AddEventListenerOptions optional ผลลัพธ์:  void ฟังก์ชันนี้ยังไม่พร้อมใช้งาน
removeEventListener	หมายเหตุ: ใช้ได้เฉพาะในช่อง v=beta removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

PinElementOptions interface

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 ขนาดหมุด