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ı, temel parametreleri (position, title ve map) ve PinElement sınıfı daha fazlası için seçenekler içerir birçok seçenek var. Aşağıdaki snippet'te yeni bir PinElement oluşturmak için kullanılacak kod gösterilmektedir. bir işaretçiye uygulayın.

// 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 kullanılarak oluşturulan haritalarda, bir işaretçiye ilişkin temel parametreler gmp-advanced-marker HTML öğesi; PinElement sınıfının programatik olarak uygulanması gerekiyor. Bunu yapmak için kodunuz: gmp-advanced-marker öğelerini HTML sayfasından alma. Aşağıdakiler snippet, gmp-advanced-marker öğe koleksiyonunu sorgulayacak kodu gösterir, daha sonra, 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);
}

Bu sayfada, işaretçileri aşağıdaki şekillerde nasıl özelleştireceğiniz gösterilmektedir:

Gelişmiş işaretçinin bölümlerini gösteren bir diyagram.
Şekil 1: Gelişmiş İşaretçinin bölümleri.

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 okunabiliyor okuyuculardan yardım alabilirsiniz.

Programatik olarak başlık metni eklemek için AdvancedMarkerElement.title kullanın seçenek:

// 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

HTML kullanılarak oluşturulan bir işaretçiye başlık metni eklemek için title özelliğini kullanın:

<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>
index.html

İşaretçiyi ölçeklendirin

Bir işaretçiyi ölçeklendirmek için 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

Bir iş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

Bir görselin kenarlık rengini değiştirmek için PinElement.borderColor seçeneğini kullanın. işaretçi:

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ştirin

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

Karakteri gizle

İş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, glifin görsel olarak gizlenmesi gibi bir etkiye sahiptir.

Sonraki adımlar: