Semboller (Vektör Tabanlı Simgeler)

  1. Giriş
  2. Sembol özellikleri
  3. Önceden tanımlanmış semboller
  4. İşarete sembol ekleme
  5. Çoklu çizgiye sembol ekleme
  6. Sembole animasyon ekleme

Giriş

Symbol, Marker veya Polyline nesnesinde gösterilebilen vektör tabanlı bir simgedir. Sembolün şekli, SVG yolu gösterimi kullanılarak bir yolla tanımlanır. path tek zorunlu özellik olsa da Symbol nesnesi, konturun rengi ve ağırlığı ile dolgu gibi görsel öğeleri özelleştirmenize olanak tanıyan çeşitli özellikleri destekler. Özelliklerin listesine bakın.

SymbolPath sınıfı aracılığıyla önceden tanımlanmış çeşitli semboller kullanılabilir. Listeyi aşağıda görebilirsiniz.

Sembol özellikleri

Symbol öğesinin varsayılan davranışının, işaretçide veya çoklu çizgi üzerinde görünmesine bağlı olarak biraz farklılık gösterdiğini unutmayın. Bu farklılıklar aşağıdaki özellikler listesinde açıklanmıştır.

Symbol aşağıdaki özellikleri destekler:

  • path (zorunlu), sembolün şeklini tanımlayan yoldur. google.maps.SymbolPath bölümündeki önceden tanımlanmış yollardan birini kullanabilir veya SVG yolu gösterimi ile özel bir yol tanımlayabilirsiniz. Not: Çoklu çizgideki vektör yolları 22x22 piksel kareye sığmalıdır. Yolunuz bu karenin dışındaki noktaları içeriyorsa ölçeklendirilen noktaların kareye sığması için sembolün scale özelliğini 0,2 gibi kesirli bir değere ayarlamanız gerekir.
  • anchor, sembolün işaretleyiciye veya çoklu çizgiye göre konumunu ayarlar. Sembolün yolunun koordinatları, sırasıyla sabitleme noktasının x ve y koordinatları tarafından sola ve yukarı doğru çevrilir. Varsayılan olarak, bir sembol (0, 0) konumuna sabitlenir. Konum, sembolün yoluyla aynı koordinat sisteminde ifade edilir.
  • fillColor, sembolün dolgusunun rengidir (yani, konturla çevrili bölge). Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir. İşaretçilerdeki semboller için varsayılan renk "siyah"tır. Çoklu çizgilerdeki semboller için varsayılan olarak ilgili çoklu çizginin kontur rengi kullanılır.
  • fillOpacity, sembolün dolgusunun göreli opaklığını (yani şeffaflık eksikliğini) tanımlar. Değerler 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında değişir. Varsayılan değer 0,0'dır.
  • rotation, sembolün döndürüleceği açıdır ve saat yönünde derece cinsinden ifade edilir. Varsayılan olarak, bir sembol işaretçinin dönüşü 0'dır ve bir çoklu çizgi üzerindeki sembol, üzerinde bulunduğu kenarın açısıyla döndürülür. Çoklu çizgi üzerindeki bir sembolün döndürme açısını ayarlamak, sembolün döndürme açısını düzelterek artık çizginin eğrisini takip etmemesini sağlar.
  • scale, sembolün boyutunun ölçekleneceği miktarı ayarlar. Simge işaretçiler için varsayılan ölçek 1'dir. Sembol, ölçeklendirmeden sonra herhangi bir boyutta olabilir. Çoklu çizgi üzerindeki semboller için varsayılan ölçek, çoklu çizginin çizgi kalınlığıdır. Sembol, ölçeklendirmeden sonra 22x22 piksel boyutunda bir karenin içinde yer almalı ve sembolün tutturma noktasına göre ortalanmalıdır.
  • strokeColor, sembolün dış çizgisinin rengidir. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir. İşaretçilerdeki semboller için varsayılan renk "siyah"tır. Çoklu çizgi üzerindeki semboller için varsayılan renk, çoklu çizginin kontur rengidir.
  • strokeOpacity, sembolün konturunun göreceli opaklığını (yani şeffaflık eksikliğini) belirler. Değerler 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında değişir. Simge işaretçiler için varsayılan değer 1, 0'dır. Çoklu çizgilerdeki semboller için varsayılan değer, çoklu çizginin kontur opaklığıdır.
  • strokeWeight, sembolün ana hattının ağırlığını tanımlar. Varsayılan değer, sembolün scale değeridir.

Önceden tanımlanmış semboller

Maps JavaScript API, SymbolPath sınıfı aracılığıyla işaretçilere veya çoklu çizgilere ekleyebileceğiniz bazı yerleşik semboller sağlar.

Varsayılan semboller arasında bir daire ve iki tür ok bulunur. Hem ileri hem de geri oklar kullanılabilir. Bu, özellikle çoklu çizgiler için yararlıdır. Çünkü çoklu çizgilerdeki sembollerin yönü sabittir. İleri, çoklu çizginin bitiş noktası yönünde kabul edilir.

Varsayılan sembol seçeneklerinden herhangi birini kullanarak önceden tanımlanmış sembollerin konturunu veya dolgusunu değiştirebilirsiniz.

Aşağıdaki önceden tanımlanmış semboller dahildir:

Ad Açıklama Örnek
google.maps.SymbolPath.CIRCLE Bir daire.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Her tarafı kapalı, geriye doğru işaret eden bir ok.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Her tarafı kapalı, ileri doğru işaret eden bir ok.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Bir tarafı açık, geriye doğru işaret eden ok.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Bir tarafı açık, ileriye doğru işaret eden ok.

İşarete simge ekleme

AdvancedMarkerElement üzerinde vektör tabanlı bir simge görüntülemek için SVG XML öğesini kullanın. Aşağıdaki örnekte, bir AdvancedMarkerElement öğesine SVG XML öğesinin nasıl ekleneceği gösterilmektedir.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

Çoklu çizgiye sembol ekleme

Bir çoklu çizgi üzerinde sembol göstermek için PolylineOptions nesnesinin icons[] özelliğini ayarlayın. icons[] dizisi, aşağıdaki özelliklere sahip bir veya daha fazla IconSequence nesne değişmezi alır:

  • icon (zorunlu), satırda oluşturulacak semboldür.
  • offset, bir simgenin oluşturulacağı, çizginin başlangıcına olan mesafeyi belirler. Bu mesafe, çizginin uzunluğunun yüzdesi (ör. "%50") veya piksel cinsinden (ör. "50 piksel") ifade edilebilir. Varsayılan değer "%100" olarak ayarlanmıştır.
  • repeat, satırdaki ardışık simgeler arasındaki mesafeyi belirler. Bu mesafe, çizginin uzunluğunun yüzdesi (ör. "%50") veya piksel (ör. "50 piksel") cinsinden ifade edilebilir. Simgenin tekrarlanmasını devre dışı bırakmak için "0" değerini belirtin. Varsayılan değer "0"dır.

Semboller ve PolylineOptions sınıfının birleşimiyle, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde büyük ölçüde kontrol sahibi olursunuz. Uygulayabileceğiniz özelleştirmelerden bazı örnekleri aşağıda bulabilirsiniz.

Oklar

Çoklu çizginizin başlangıcına veya sonuna ok eklemek için IconSequence.offset özelliğini kullanın.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Örneği görüntüleyin

Kesikli çizgiler

Çoklu çizginizin opaklığını 0 olarak ayarlayıp çizginin üzerine düzenli aralıklarla opak bir sembol yerleştirerek kesikli çizgi efekti elde edebilirsiniz.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Örneği görüntüleyin

Özel yollar

Özel semboller, çoklu çizgiye birçok farklı şekil eklemenize olanak tanır.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Örneği görüntüleyin

Sembole animasyon ekleme

DOM'un window.setInterval() işlevini kullanarak sembolün sabit aralıklarla ofsetini değiştirerek bir sembolü yol boyunca canlandırabilirsiniz.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
Örneği görüntüleyin