การปรับแต่งเครื่องหมายพื้นฐาน

เลือกแพลตฟอร์ม: Android iOS JavaScript

เครื่องหมายขั้นสูงใช้ 2 คลาสในการกำหนดตัวทำเครื่องหมาย ได้แก่ คลาส AdvancedMarkerElement มีฟังก์ชันเครื่องหมายเริ่มต้น และ PinElement มีตัวเลือกสำหรับการปรับแต่งเพิ่มเติม หน้านี้จะแสดงวิธีปรับแต่งเครื่องหมายในลักษณะต่อไปนี้

  • เพิ่มข้อความชื่อ
  • ปรับขนาดเครื่องหมาย
  • เปลี่ยนสีพื้นหลัง
  • เปลี่ยนสีเส้นขอบ
  • เปลี่ยนสีรูปอักขระ
  • ซ่อนรูปอักขระ
แผนภาพแสดงส่วนต่างๆ ของเครื่องหมายขั้นสูง
ภาพที่ 1: ส่วนต่างๆ ของเครื่องหมายขั้นสูง

เพิ่มข้อความชื่อ

ข้อความชื่อเรื่องจะปรากฏเมื่อเคอร์เซอร์วางอยู่เหนือเครื่องหมาย โปรแกรมอ่านหน้าจอ อ่านข้อความชื่อได้ ใช้ตัวเลือก 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',
});
index.ts

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",
});
index.js

ปรับขนาดเครื่องหมาย

ใช้ตัวเลือก PinElement.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,
});
index.ts

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,
});
index.js

เปลี่ยนสีพื้นหลัง

ใช้ตัวเลือก 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,
});
index.ts

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,
});
index.js

เปลี่ยนสีเส้นขอบ

ใช้ตัวเลือก 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,
});
index.ts

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,
});
index.js

เปลี่ยนสีรูปอักขระ

ใช้ตัวเลือก 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,
});
index.ts

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,
});
index.js

ซ่อนรูปอักขระ

ตั้งค่าตัวเลือก 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,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js

หรือตั้งค่า PinElement.glyphColor เป็นค่าเดียวกับ PinElement.background เอฟเฟกต์นี้มีเอฟเฟกต์ซ่อนรูปอักขระด้วยภาพ

ขั้นตอนถัดไป