เครื่องหมายขั้นสูงใช้ 2 คลาสในการกำหนดเครื่องหมาย ได้แก่
AdvancedMarkerElement
จะมีพารามิเตอร์พื้นฐาน (position
,
title
และ map
) และชั้นเรียน PinElement
มีตัวเลือกสำหรับข้อมูลเพิ่มเติม
การปรับแต่งได้มากขึ้น ข้อมูลโค้ดต่อไปนี้แสดงโค้ดสำหรับสร้าง PinElement
ใหม่
แล้วใช้สีนั้นกับเครื่องหมาย
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
ในแผนที่ที่สร้างขึ้นโดยใช้ HTML ระบบจะประกาศพารามิเตอร์พื้นฐานสำหรับเครื่องหมายโดยใช้
องค์ประกอบ HTML gmp-advanced-marker
การปรับแต่งใดๆ ที่ใช้
ต้องใช้คลาส PinElement
แบบเป็นโปรแกรม ในการดำเนินการนี้ โค้ดของคุณต้อง
เรียกองค์ประกอบ gmp-advanced-marker
จากหน้า HTML ดังต่อไปนี้
ข้อมูลโค้ดแสดงโค้ดสำหรับค้นหาคอลเล็กชันขององค์ประกอบ gmp-advanced-marker
จากนั้นทำซ้ำผ่านผลลัพธ์เพื่อใช้การปรับแต่งที่ประกาศไว้ใน
PinElement
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
หน้านี้แสดงวิธีกำหนดเครื่องหมายเองในลักษณะต่อไปนี้
- เพิ่มข้อความชื่อ
- ปรับขนาดเครื่องหมาย
- เปลี่ยนสีพื้นหลัง
- เปลี่ยนสีเส้นขอบ
- เปลี่ยนสีรูปอักขระ
- ซ่อนรูปอักขระ
![แผนภาพแสดงส่วนต่างๆ ของเครื่องหมายขั้นสูง](https://google-developers.gonglchuangl.net/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=0&hl=th)
เพิ่มข้อความชื่อ
ข้อความชื่อจะปรากฏขึ้นเมื่อเคอร์เซอร์วางอยู่เหนือเครื่องหมาย ข้อความชื่ออ่านได้ ตามโปรแกรมอ่านหน้าจอ
หากต้องการเพิ่มข้อความชื่อแบบเป็นโปรแกรม ให้ใช้ AdvancedMarkerElement.title
ตัวเลือก:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
หากต้องการเพิ่มข้อความชื่อลงในเครื่องหมายที่สร้างขึ้นโดยใช้ HTML ให้ใช้แอตทริบิวต์ title
:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
ปรับขนาดเครื่องหมาย
หากต้องการปรับขนาดเครื่องหมาย ให้ใช้ตัวเลือก scale
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
เปลี่ยนสีพื้นหลัง
ใช้ตัวเลือก PinElement.background
เพื่อเปลี่ยนสีพื้นหลังของเครื่องหมาย
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
เปลี่ยนสีเส้นขอบ
ใช้ตัวเลือก PinElement.borderColor
เพื่อเปลี่ยนสีเส้นขอบของ
เครื่องหมาย:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
เปลี่ยนสีรูปอักขระ
ใช้ตัวเลือก PinElement.glyphColor
เพื่อเปลี่ยนสีรูปอักขระของเครื่องหมาย
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
ซ่อนรูปอักขระ
ตั้งค่าตัวเลือก PinElement.glyph
เป็นสตริงว่างเปล่าเพื่อซ่อนรูปอักขระของตัวทำเครื่องหมาย
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
หรือตั้งค่า PinElement.glyphColor
เป็นค่าเดียวกับ PinElement.background
ซึ่งทำให้เกิดการซ่อนรูปอักขระ