Temel işaretçi özelleştirme

Platform seçin: Android iOS JavaScript

Gelişmiş işaretçiler, işaretçileri tanımlamak için iki sınıf kullanır: AdvancedMarkerElement sınıfı varsayılan işaretçi işlevselliğini ve PinElement daha fazla özelleştirme için seçenekler içerir. Bu sayfada, işaretçileri aşağıdaki şekillerde nasıl özelleştireceğiniz gösterilmektedir:

  • Başlık metni ekleyin
  • İşaretçiyi ölçeklendirin
  • Arka plan rengini değiştirme
  • Kenarlık rengini değiştirme
  • Glif rengini değiştirme
  • Glifi gizle
Gelişmiş İşaretçi'nin parçalarını gösteren diyagram.
Şekil 1: Gelişmiş İşaretçinin parçaları.

Başlık metni ekleyin

Başlık metni, imleç bir işaretçinin üzerine geldiğinde görünür. Başlık metni, ekran okuyucular tarafından okunabilir. İşaretçiye başlık metni eklemek için AdvancedMarkerElement.title seçeneğini kullanın:

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

İşaretçiyi ölçeklendirin

İşaretçinin ölçeğini ayarlamak için PinElement.scale seçeneğini kullanın:

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

Arka plan rengini değiştirme

İşaretçinin arka plan rengini değiştirmek için PinElement.background seçeneğini kullanın:

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

Kenarlık rengini değiştirme

İşaretçinin kenarlık rengini değiştirmek için PinElement.borderColor seçeneğini kullanın:

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

Glif rengini değiştirme

Bir işaretçinin glif rengini değiştirmek için PinElement.glyphColor seçeneğini kullanın:

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

Glifi gizle

Bir işaretçinin glifini gizlemek için PinElement.glyph seçeneğini boş bir dizeye ayarlayın:

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

Alternatif olarak, PinElement.glyphColor öğesini PinElement.background ile aynı değere ayarlayın. Bu durumda glif görsel olarak gizlenir.

Sonraki adımlar: