Advanced Markers

คลาส AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

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

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

ผู้ผลิต
AdvancedMarkerElement	AdvancedMarkerElement([options]) พารามิเตอร์ options: AdvancedMarkerElementOptions optional สร้าง AdvancedMarkerElement พร้อมตัวเลือกที่ระบุ หากมีการระบุแผนที่ ระบบจะเพิ่ม AdvancedMarkerElement ลงในแผนที่เมื่อสร้าง

พร็อพเพอร์ตี้
anchorLeft attr: anchor-left	ประเภท: string optional ค่าเริ่มต้น: "-50%" ค่า CSS length-percentage ซึ่งใช้เพื่อชดเชยจุดยึดของเครื่องหมายจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น แอตทริบิวต์ HTML: anchor-left="string"
anchorTop attr: anchor-top	ประเภท: string optional ค่าเริ่มต้น: "-100%" ค่า CSS length-percentage ซึ่งใช้เพื่อชดเชยจุดยึดของเครื่องหมายจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น แอตทริบิวต์ HTML: anchor-top="string"
collisionBehavior	ประเภท: CollisionBehavior optional ดูAdvancedMarkerElementOptions.collisionBehavior
gmpClickable attr: gmp-clickable	ประเภท: boolean optional ดูAdvancedMarkerElementOptions.gmpClickable แอตทริบิวต์ HTML: gmp-clickable
gmpDraggable	ประเภท: boolean optional ดูAdvancedMarkerElementOptions.gmpDraggable
map	ประเภท: Map optional ดูAdvancedMarkerElementOptions.map
position attr: position	ประเภท: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ดูAdvancedMarkerElementOptions.position แอตทริบิวต์ HTML: position="lat,lng" position="lat,lng,altitude"
title attr: title	ประเภท: string ดูAdvancedMarkerElementOptions.title แอตทริบิวต์ HTML: title="string"
zIndex	ประเภท: number optional ดูAdvancedMarkerElementOptions.zIndex
element readonly	เลิกใช้งานแล้ว: ใช้ AdvancedMarkerElement โดยตรง ประเภท: HTMLElement ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM ที่สนับสนุนมุมมอง
content	เลิกใช้งาน: ให้ใช้ .children แทน ประเภท: Node optional ดูAdvancedMarkerElementOptions.content

เมธอด
addListener	addListener(eventName, handler) พารามิเตอร์ eventName: เหตุการณ์ที่สังเกตได้ string รายการ handler: Function ฟังก์ชันสำหรับจัดการเหตุการณ์ ค่าที่แสดงผล: MapsEventListener Listener เหตุการณ์ที่ได้ เพิ่มฟังก์ชัน Listener ที่ระบุลงในชื่อเหตุการณ์ที่ระบุในระบบการจัดการเหตุการณ์ของ Maps
สืบทอด: 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	function(event) อาร์กิวเมนต์ event: AdvancedMarkerClickEvent เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ AdvancedMarkerElement เหมาะที่จะใช้กับ addEventListener() (แทน addListener())

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

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

ตัวเลือกสำหรับการสร้าง AdvancedMarkerElement

พร็อพเพอร์ตี้
anchorLeft ไม่บังคับ	ประเภท: string optional ค่าเริ่มต้น: "-50%" ค่า CSS length-percentage ซึ่งใช้เพื่อชดเชยจุดยึดของเครื่องหมายจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น
anchorTop ไม่บังคับ	ประเภท: string optional ค่าเริ่มต้น: "-100%" ค่า CSS length-percentage ซึ่งใช้เพื่อชดเชยจุดยึดของเครื่องหมายจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น
collisionBehavior ไม่บังคับ	ประเภท: CollisionBehavior optional การแจงนับที่ระบุลักษณะการทำงานของ AdvancedMarkerElement เมื่อชนกับ AdvancedMarkerElement อื่นหรือกับป้ายกำกับแผนที่ฐานในแผนที่เวกเตอร์ หมายเหตุ: การทับซ้อนกันระหว่าง AdvancedMarkerElement กับ AdvancedMarkerElement จะทำงานได้ทั้งในแผนที่แรสเตอร์และแผนที่เวกเตอร์ แต่การทับซ้อนกันระหว่าง AdvancedMarkerElement กับป้ายกำกับของแผนที่ฐานจะทำงานได้เฉพาะในแผนที่เวกเตอร์เท่านั้น
content ไม่บังคับ	ประเภท: Node optional ค่าเริ่มต้น: PinElement องค์ประกอบ DOM ที่รองรับภาพของ AdvancedMarkerElement โคลนองค์ประกอบ DOM ที่ส่งเข้ามาหมายเหตุ: AdvancedMarkerElement ไม่ได้โคลนองค์ประกอบ DOM ที่ส่งเข้ามา เมื่อส่งองค์ประกอบ DOM ไปยัง AdvancedMarkerElement แล้ว การส่งองค์ประกอบ DOM เดียวกันไปยัง AdvancedMarkerElement อื่นจะย้ายองค์ประกอบ DOM และทำให้ AdvancedMarkerElement ก่อนหน้าดูว่างเปล่า
gmpClickable ไม่บังคับ	ประเภท: boolean optional ค่าเริ่มต้น: false หาก true AdvancedMarkerElement จะคลิกได้และทริกเกอร์เหตุการณ์ gmp-click และจะโต้ตอบได้เพื่อวัตถุประสงค์ด้านการช่วยเหลือพิเศษ (เช่น อนุญาตให้ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ผ่านปุ่มลูกศร)
gmpDraggable ไม่บังคับ	ประเภท: boolean optional ค่าเริ่มต้น: false หาก true คุณจะลาก AdvancedMarkerElement ได้ หมายเหตุ: AdvancedMarkerElement ที่มีระดับความสูงจะลากไม่ได้
map ไม่บังคับ	ประเภท: Map optional แผนที่ที่จะแสดง AdvancedMarkerElement ต้องใช้แผนที่เพื่อแสดง AdvancedMarkerElement และสามารถระบุได้โดยการตั้งค่า AdvancedMarkerElement.map หากไม่ได้ระบุไว้ในโครงสร้าง
position ไม่บังคับ	ประเภท: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ตั้งค่าตำแหน่งของ AdvancedMarkerElement AdvancedMarkerElement อาจสร้างขึ้นโดยไม่มีตำแหน่ง แต่จะไม่แสดงจนกว่าจะมีการระบุตำแหน่ง เช่น โดยการดำเนินการหรือตัวเลือกของผู้ใช้ คุณสามารถระบุตำแหน่งของ AdvancedMarkerElement ได้โดยการตั้งค่า AdvancedMarkerElement.position หากไม่ได้ระบุไว้ในโครงสร้าง หมายเหตุ: AdvancedMarkerElement ที่มีระดับความสูงรองรับเฉพาะในแผนที่เวกเตอร์เท่านั้น
title ไม่บังคับ	ประเภท: string optional ข้อความเมื่อวางเมาส์เหนือ หากระบุ ระบบจะเพิ่มข้อความสำหรับการช่วยเหลือพิเศษ (เช่น สำหรับใช้กับโปรแกรมอ่านหน้าจอ) ลงใน AdvancedMarkerElement พร้อมค่าที่ระบุ
zIndex ไม่บังคับ	ประเภท: number optional AdvancedMarkerElement ทั้งหมดจะแสดงบนแผนที่ตามลำดับ zIndex โดยค่าที่สูงกว่าจะแสดงอยู่ด้านหน้า AdvancedMarkerElement ที่มีค่าต่ำกว่า โดยค่าเริ่มต้น AdvancedMarkerElement จะแสดงตามตำแหน่งแนวตั้งบนหน้าจอ โดย AdvancedMarkerElement ที่อยู่ต่ำกว่าจะปรากฏด้านหน้า AdvancedMarkerElement ที่อยู่สูงขึ้นไปบนหน้าจอ การผสมเครื่องหมายที่มี zIndex ที่ชัดเจนกับเครื่องหมายที่ไม่มีอาจทำให้เกิดผลลัพธ์ภาพที่ไม่คาดคิด เพื่อให้แน่ใจว่าลักษณะการทำงานเป็นไปตามที่คาดการณ์ได้ ขอแนะนำให้ตั้งค่า zIndex สำหรับเครื่องหมายทั้งหมดหรือปล่อยไว้โดยไม่ต้องตั้งค่า โปรดทราบว่าระบบจะใช้ zIndex เพื่อช่วยกำหนดลำดับความสำคัญที่เกี่ยวข้องระหว่างCollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITYเครื่องหมายขั้นสูง ด้วย ค่า zIndex ที่สูงขึ้นหมายถึงลำดับความสำคัญที่สูงขึ้น

คลาส AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

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

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

คลาส PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

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

const {PinElement} = await google.maps.importLibrary("marker");

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

พร็อพเพอร์ตี้
background	ประเภท: string optional สีพื้นหลังของรูปร่างหมุด ดูPinElementOptions.background
borderColor	ประเภท: string optional สีเส้นขอบของรูปร่างหมุด ดูPinElementOptions.borderColor
glyphColor	ประเภท: string optional สีของภาพสัญลักษณ์ของหมุด ดูPinElementOptions.glyphColor
glyphSrc	ประเภท: URL|string optional แหล่งที่มาของรูปภาพสัญลักษณ์ที่จะแสดงในหมุด ดูPinElementOptions.glyphSrc
glyphText	ประเภท: string optional ข้อความที่แสดงในหมุด ดูPinElementOptions.glyphText
scale	ประเภท: number optional ดูPinElementOptions.scale
element readonly	เลิกใช้งานแล้ว: ใช้ PinElement โดยตรง ประเภท: HTMLElement ช่องนี้เป็นแบบอ่านอย่างเดียว องค์ประกอบ DOM ที่สนับสนุนมุมมอง
glyph	เลิกใช้งาน: โปรดใช้ PinElementOptions.glyphText หรือ PinElementOptions.glyphSrc แทน ประเภท: string|Element|URL optional ดูPinElementOptions.glyph

เมธอด
สืบทอด: addEventListener, removeEventListener

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

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

ตัวเลือกสำหรับการสร้าง PinElement

พร็อพเพอร์ตี้
background ไม่บังคับ	ประเภท: string optional สีพื้นหลังของรูปร่างหมุด รองรับค่าสี CSS ใดก็ได้
borderColor ไม่บังคับ	ประเภท: string optional สีเส้นขอบของรูปร่างหมุด รองรับค่าสี CSS ใดก็ได้
glyph ไม่บังคับ	เลิกใช้งาน: โปรดใช้ PinElementOptions.glyphText หรือ PinElementOptions.glyphSrc แทน ประเภท: string|Element|URL optional องค์ประกอบ DOM ที่แสดงในหมุด
glyphColor ไม่บังคับ	ประเภท: string optional สีของภาพสัญลักษณ์ รองรับค่าสี CSS ใดก็ได้
glyphSrc ไม่บังคับ	ประเภท: URL|string optional แหล่งที่มาของรูปภาพสัญลักษณ์ที่จะแสดงในหมุด
glyphText ไม่บังคับ	ประเภท: string optional ข้อความที่แสดงในหมุด
scale ไม่บังคับ	ประเภท: number optional ค่าเริ่มต้น: 1 ขนาดของหมุด