เครื่องหมายขั้นสูงใช้ 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);
}
หน้านี้แสดงวิธีกำหนดเครื่องหมายเองในลักษณะต่อไปนี้
- เพิ่มข้อความชื่อ
- ปรับขนาดเครื่องหมาย
- เปลี่ยนสีพื้นหลัง
- เปลี่ยนสีเส้นขอบ
- เปลี่ยนสีรูปอักขระ
- ซ่อนรูปอักขระ
เพิ่มข้อความชื่อ
ข้อความชื่อเรื่องจะปรากฏขึ้นเมื่อเคอร์เซอร์วางอยู่เหนือเครื่องหมาย ข้อความชื่ออ่านได้ด้วยโปรแกรมอ่านหน้าจอ
หากต้องการเพิ่มข้อความชื่อแบบเป็นโปรแกรม ให้ใช้ตัวเลือก AdvancedMarkerElement.title
TypeScript
// 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',
});
JavaScript
// 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
ซึ่งทำให้เกิดการซ่อนรูปอักขระ
ขั้นตอนถัดไป
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2024-06-29 UTC
[]
[]