Semboller (Vektör Tabanlı Simgeler)

  1. Giriş
  2. Simgeler ve özellikleri
  3. Önceden tanımlanmış simgeler
  4. İşaretçiye simge ekleme
  5. Poli çizgiye simge ekleme
  6. Simgeye animasyon ekleme

Giriş

Symbol, Marker veya Polyline nesnesinde gösterilebilen vektör tabanlı bir simgedir. Simgenin şekli, SVG yol gösterimi kullanılarak bir yol ile tanımlanır. Yalnızca path özelliği zorunludur ancak Symbol nesnesi, çizginin ve dolgunun rengi ve kalınlığı gibi görsel özellikleri özelleştirmenize olanak tanıyan çeşitli özellikleri destekler. Mülklerin listesini inceleyin.

SymbolPath sınıfı aracılığıyla önceden tanımlanmış çeşitli semboller kullanılabilir. Aşağıdaki listeye bakın.

Bir sembolün özellikleri

Symbol öğesinin varsayılan davranışının, bir işaretçide mi yoksa çoklu çizgide mi göründüğüne bağlı olarak biraz farklılık gösterdiğini unutmayın. Bu farklılıklar aşağıdaki mülk 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 yol gösterimi kullanarak özel bir yol tanımlayabilirsiniz. Not: Bir çoklu çizgideki vektör yolları 22x22 piksellik bir kareye sığmalıdır. Yolunuz bu karenin dışındaki noktaları içeriyorsa elde edilen ölçeklendirilmiş noktaların kare içine sığması için sembolün scale özelliğini 0,2 gibi kesirli bir değere ayarlamanız gerekir.
  • anchor, simgenin işaretleyiciye veya çoklu çizgiye göre konumunu belirler. Sembelin yolunun koordinatları, sırasıyla ankrajın x ve y koordinatlarına göre sola ve yukarı kaydırılır. Simgeler varsayılan olarak (0, 0) noktasına yerleştirilir. Konum, sembolün yolu ile aynı koordinat sisteminde ifade edilir.
  • fillColor, sembolün dolgusunun (yani fırçayla kenarlıklandırılmış bölgenin) rengidir. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir. İşaretçilerdeki simgeler için varsayılan renk "siyah"tır. Çoklu çizgilerdeki semboller için varsayılan ayar, ilgili çoklu çizginin çizgi rengidir.
  • fillOpacity, simgenin dolgusunun göreceli opaklığını (yani şeffaflık 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, simgenin döndürüleceği açıdır ve saat yönünde derece cinsinden ifade edilir. Varsayılan olarak simge işaretçisinin dönme açısı 0'dır ve bir poli çizgi üzerindeki simge, bulunduğu kenarın açısına göre döndürülür. Bir poli çizgideki simgenin dönüşümü ayarlandığında, simgenin dönüşümü artık çizginin eğrisini takip etmeyecek şekilde sabitlenir.
  • scale, sembolün boyut olarak ölçeklendirildiği miktarı belirler. Simge işaretçileri için varsayılan ölçek 1'dir. Ölçeklendirmeden sonra simge herhangi bir boyutta olabilir. Bir çok çizgi üzerindeki simgeler için varsayılan ölçek, çok çizginin çizgi kalınlığıdır. Ölçeklendirmeden sonra simge, 22x22 piksellik bir karenin içinde olmalı ve simgenin sabit noktasında ortalanmalıdır.
  • strokeColor, simgenin dış çizgisinin rengidir. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir. İşaretçilerdeki simgeler için varsayılan değer "siyah"tır. Bir çok çizgi üzerindeki sembollerin varsayılan rengi, çok çizginin fırça rengidir.
  • strokeOpacity, simgenin çizgisinin göreceli opaklığını (yani şeffaflık Değerler 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında değişir. Simge işaretçileri için varsayılan değer 1, 0'dır. Çoklu çizgilerdeki simgeler için varsayılan ayar, çoklu çizginin çizgi opaklığıdır.
  • strokeWeight, sembolün ana hatlarının kalınlığını tanımlar. Varsayılan değer, sembolün scale değeridir.

Önceden tanımlanmış simgeler

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

Varsayılan simgeler arasında bir daire ve iki tür ok bulunur. Hem ileri hem de geri bakan oklar kullanılabilir. Bu özellik, poli çizgilerdeki sembollerin yönü sabit olduğundan özellikle poli çizgiler için yararlıdır. İleri, çoklu çizginin son noktasının yönünde olduğu kabul edilir.

Varsayılan simge seçeneklerinden herhangi birini kullanarak önceden tanımlanmış simgelerin konturunu veya içini değiştirebilirsiniz.

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

Ad Açıklama Örnek
google.maps.SymbolPath.CIRCLE Bir daire.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Tüm kenarları kapalı, geriye dönük bir ok.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Her tarafı kapalı, ileriye dönük bir ok.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Bir tarafı açık olan, geriye doğru bakan ok.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Bir tarafı açık olan, ileriyi gösteren ok.

İşaretçiye simge ekleme

Bir işaretçi üzerinde vektör tabanlı bir simge görüntülemek için, istenen yolu içeren bir Symbol nesne değişmez değerini işaretçinin icon mülküne iletin. Aşağıdaki örnekte, işaretçi için özel bir simge oluşturmak amacıyla SVG yol gösterimi kullanılmaktadır.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

Örneği Deneyin

Çoklu çizgiye simge ekleme

Bir çok çizgi üzerinde simge görüntülemek 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 simgedir.
  • offset, bir simgenin oluşturulacağı satırın başlangıcından itibaren mesafeyi belirler. Bu mesafe, çizginin uzunluğunun yüzdesi (ör. "%50") veya piksel cinsinden (ör. "50 piksel") ifade edilebilir. Varsayılan değer "%100"dür.
  • repeat, çizgideki art arda gelen simgeler arasındaki mesafeyi belirler. Bu mesafe, çizginin uzunluğunun yüzdesi (ör. "%50") veya piksel cinsinden (ör. "50px") ifade edilebilir. Simgenin tekrarlanmasını devre dışı bırakmak için "0" değerini belirtin. Varsayılan değer "0"dır.

Simgelerin ve PolylineOptions sınıfının bir kombinasyonuyla haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde çok fazla kontrole sahip olabilirsiniz. Aşağıda, uygulayabileceğiniz bazı özelleştirme örnekleri verilmiştir.

Oklar

Poli çizginizin başına veya sonuna ok eklemek için IconSequence.offset mülkünü 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 ayarlayarak ve çizginin üzerine düzenli aralıklarla opak bir simge yerleştirerek çizginin kesikli görünmesini sağlayabilirsiniz.

// 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 simgeler, bir ç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

Simge animasyonu

DOM'un window.setInterval() işlevini kullanarak sabit aralıklarla simgesinin ofsetini değiştirerek bir simgeyi bir yol boyunca hareket ettirebilirsiniz.

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;
index.ts

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;
index.js
Örneği görüntüleyin

Örneği Deneyin