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 fazla özelleştirme için seçenekler içerir. Aşağıdaki snippet'te yeni bir PinElement oluşturmak ve bu kodu işaretçiye uygulamak için gereken kod gösterilmektedir.

// 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çinin temel parametreleri gmp-advanced-marker HTML öğesi kullanılarak tanımlanır; PinElement sınıfını kullanan tüm özelleştirmeler programatik olarak uygulanmalıdır. Bunu yapmak için kodunuzun HTML sayfasından gmp-advanced-marker öğelerini alması gerekir. Aşağıdaki snippet, gmp-advanced-marker öğelerinden oluşan bir koleksiyon için sorgulama yapmak üzere kodu göstermektedir; daha sonra PinElement içinde tanımlanan özelleştirmeyi uygulamak için sonuçları yinelemektedir.

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

• Başlık metni ekleme
• İşaretçiyi ölçeklendirme
• Arka plan rengini değiştirme
• Kenarlık rengini değiştirme
• Glif rengini değiştirme
• Glifi gizleme

Ş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.

Başlık metnini programatik olarak 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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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
    


HTML kullanılarak oluşturulmuş 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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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
    

      Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.
    
    
    

    
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:


Grafik içeren işaretçiler oluşturma