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çilerin aşağıdaki şekillerde nasıl özelleştirileceği gösterilmektedir:

Gelişmiş İşaretçi&#39;nin bölümleri.
Şekil 1: Gelişmiş İşaretçi'nin bölümleri.

Başlık metni ekleme

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

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

İş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.035 },
    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.035 },
  content: pinBorder.element,
});
index.js

Glif rengini değiştirin

İşaretçinin simge 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.025 },
    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.025 },
  content: pinGlyph.element,
});
index.js

Bir glife metin ekleme

Varsayılan glifi metin karakteriyle değiştirmek için PinElement.glyph seçeneğini kullanın. PinElement içindeki metin glifi, PinElement ve varsayılan rengi, PinElement öğesinin varsayılan glyphColor rengiyle eşleşiyor.

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

Karakteri gizle

İşaretçinin simgesini gizlemek için PinElement.glyph seçeneğini boş bir dize olarak ayarlayın:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    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.005 },
  content: pinNoGlyph.element,
});
index.js

Alternatif olarak, PinElement.glyphColor öğesini PinElement.background ile aynı değere ayarlayın. Bu, glifi görsel olarak gizleme etkisine sahiptir.

Sonraki adımlar: