Semboller (Vektör Tabanlı Simgeler)

  1. Giriş
  2. Bir simgenin özellikleri
  3. Önceden tanımlanmış simgeler
  4. İşaretçiye simge ekleme
  5. Çoklu çizgiye simge ekleme
  6. Bir sembolü canlandırma

Giriş

Symbol, Marker veya Polyline nesne üzerinde görüntülenebilecek, vektör tabanlı bir simgedir. Simgenin şekli, SVG yol gösterimi kullanılarak bir yolla tanımlanır. Gerekli tek özellik path olsa da Symbol nesnesi, fırçanın rengi ve dolgusu gibi görsel unsurları özelleştirmenize olanak tanıyan çeşitli özellikleri destekler. Tesislerin listesini inceleyin.

Önceden tanımlanmış birçok simge, SymbolPath sınıfı aracılığıyla kullanılabilir. Aşağıdaki listeyi inceleyin.

Bir simgenin ö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 özellik listesinde açıklanmıştır.

Symbol aşağıdaki özellikleri destekler:

  • path (zorunlu), simgenin şeklini tanımlayan yoldur. google.maps.SymbolPath içinde önceden tanımlanmış yollardan birini kullanabilir veya SVG yol gösterimini kullanarak özel bir yol tanımlayabilirsiniz. Not: Çoklu çizgi üzerindeki vektör yolları 22x22 piksellik bir karenin içine sığmalıdır. Yolunuz bu karenin dışında noktalar içeriyorsa ortaya çıkan ölçeklendirilmiş noktaların karenin içine sığması için simgenin scale özelliğini 0,2 gibi kesirli bir değere ayarlamanız gerekir.
  • anchor, simgenin konumunu işaretçiye veya çoklu çizgiye göre ayarlar. Simgenin yolunun koordinatları, çapanın x ve y koordinatlarıyla sırasıyla sola ve yukarıya çevrilir. Varsayılan olarak, (0, 0) konumu sabittir. Konum, simgenin yolu ile aynı koordinat sisteminde ifade edilir.
  • fillColor, simgenin dolgu rengidir (yani, fırçayla sınırlanan bölge). Genişletilmiş adlandırılmış renkler dışında tüm CSS3 renkleri desteklenir. İşaretçilerdeki simgeler için varsayılan değer "siyahtır". Çoklu çizgilerdeki semboller için varsayılan olarak, karşılık gelen çoklu çizginin fırça rengi kullanılır.
  • fillOpacity, simge 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. Saat yönünde derece cinsinden ifade edilir. Varsayılan olarak, simge işaretçisinin dönüşü 0 olur ve çoklu çizgi üzerindeki semboller, üzerinde bulunduğu kenarın açısına göre döndürülür. Çoklu çizgi üzerinde bir simgenin dönüşü ayarlanırsa simgenin dönüşü, çizginin eğrisini takip etmeyecek şekilde sabitlenir.
  • scale, simgenin boyut olarak ölçeklenme miktarını belirler. Sembol işaretçileri için varsayılan ölçek 1'dir. Ölçeklendirmeden sonra simge herhangi bir boyutta olabilir. Çoklu çizgi üzerindeki semboller için varsayılan ölçek, çoklu çizginin çizgi ağırlığıdır. Ölçeklendirmeden sonra, sembol 22x22 piksellik bir karenin içinde, sembolün yerinin ortasında kalmalıdır.
  • strokeColor, simgenin dış çizgisinin rengidir. Genişletilmiş adlandırılmış renkler dışında tüm CSS3 renkleri desteklenir. İşaretçilerdeki simgeler için varsayılan değer "siyahtır". Çoklu çizgi üzerindeki simgeler için varsayılan renk, çoklu çizginin fırça rengidir.
  • strokeOpacity, simgenin fırçasının göreli opaklığını (yani şeffaflık eksikliğini) belirler. Değerler 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında değişir. Sembol işaretçileri için varsayılan değer 1, 0'dır. Çoklu çizgilerdeki semboller için varsayılan değer, çoklu çizginin fırça opaklığıdır.
  • strokeWeight, simgenin dış çizgisinin ağırlığını tanımlar. Varsayılan, simgenin 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 semboller sağlar.

Varsayılan simgeler bir daire ve iki tür oktan oluşur. Hem ileri hem de geri oklar kullanılabilir. Çoklu çizgideki simgenin yönü sabit olduğundan bu özellik, özellikle çoklu çizgiler için kullanışlıdır. İlerinin, çoklu çizginin bitiş noktasının yönünde olduğu kabul edilir.

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

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

Ad Açıklama Örnek
google.maps.SymbolPath.CIRCLE Daire.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Geriye işaret eden, tüm kenarlarından kapalı bir ok.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Her yönden kapalı olan ileriyi işaret eden ok.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Bir tarafında açık olan geriye dönük bir ok.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Bir tarafında açık olan ileriyi işaret eden ok.

İşaretçiye simge ekleme

İşaretçi üzerinde vektör tabanlı bir simge görüntülemek için işaretçinin icon özelliğine istenen yolla birlikte bir Symbol nesne değişmez değerini iletin. Aşağıdaki örnekte, bir işaretçi için özel simge oluşturmak üzere 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;

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

Örneği Deneyin

Çoklu çizgiye simge ekleme

Sembolleri bir çoklu çizgi üzerinde 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şmez değerini alır:

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

Simgeler ve PolylineOptions sınıfının bir kombinasyonu sayesinde, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde geniş bir kontrole sahip olursunuz. Uygulayabileceğiniz özelleştirmelere ilişkin bazı örnekleri aşağıda bulabilirsiniz.

Oklar

Çoklu çizginizin başı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'a ayarlayıp düzenli aralıklarla çizginin üzerine opak bir simge yerleştirerek kesikli çizgi efekti oluşturabilirsiniz.

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

Bir sembolü canlandırma

Simgenin belirli uzaklıkta kopyasını oluşturmak için DOM'un window.setInterval() işlevini kullanarak yol boyunca animasyon oluşturabilirsiniz.

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

Örneği Deneyin