Semboller (Vektör Tabanlı Simgeler)

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

Giriş

Symbol, başka bir koleksiyonda görüntülenebilen vektör tabanlı bir simgedir. Marker veya bir Polyline nesnesini tanımlayın. Sembolün şekli, SVG yol gösterimi. path zorunlu tek özellik olsa da Symbol nesnesi, aşağıdakileri yapmanıza olanak tanıyan çeşitli özellikleri destekler: fırçanın rengi ve ağırlığı gibi görsel unsurları ve doldur. Tesisler listesine bakın.

SymbolPath aracılığıyla önceden tanımlanmış çeşitli semboller bulabilirsiniz sınıfını kullanır. Aşağıdaki listeyi inceleyin.

Sembolün özellikleri

Varsayılan Symbol davranışının küçük farklılıklar gösterdiğini unutmayın. bir işaretçi veya çoklu çizgide görünmesine bağlı olarak değişebilir. Bu varyanslar aşağıdaki özellikler listesinde açıklanmıştır.

Symbol aşağıdaki özellikleri destekler:

  • path (zorunlu), anlamına gelir. Şurada önceden tanımlanmış yollardan birini kullanabilirsiniz: google.maps.SymbolPath veya şunu kullanarak özel bir yol tanımlayın: SVG yolu gösterimi. Not: Çoklu çizgi üzerindeki vektör yolları, 22x22 piksellik bir kareye sığmalıdır. Yolunuz bu karenin dışında noktalar içeriyorsa sembolün scale özelliğini 0,2 gibi kesirli bir değere ayarlayabilirsiniz. Böylece, elde edilen ölçeklendirilmiş noktalar karenin içine sığacak şekilde ayarlanır.
  • anchor, simgenin işaretçiye göre konumunu belirler veya çoklu çizgiyi seçin. Sembol yolunun koordinatları sola ve yukarıya çevrilir çapanın x ve y koordinatlarına göre. Semboller varsayılan olarak sabit: (0, 0). Konum koordinat sistemini kullanmanız gerekir.
  • fillColor, simgenin dolgu rengidir ( çizgiyle sınırlanan bölgedir). Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir. İşaretçilerdeki simgeler için varsayılan olarak "siyah" kullanılır. Açık semboller için varsayılan olarak, karşılık gelen çoklu çizginin fırça rengi olur.
  • fillOpacity göreli opaklığı tanımlar (yani şeffaflık) ifade eder. Değerler, 0,0 (tümüyle) şeffaf) 1,0 (tamamen opak) olarak değişecektir. Varsayılan değer 0,0'dır.
  • rotation, sembolün döndürüleceği açıdır. derece cinsinden ifade edilir. Varsayılan olarak, bir simge işaretçisinin dönüşü 0, çoklu çizgi üzerindeki bir simge ise üzerinde bulunduğu kenarın açısıyla döndürülür. yalanlar. Çoklu çizgideki bir simgenin dönüşünü ayarlamak, çoklu çizginin dönüşünü düzeltir çizginin eğrisini izlemeyecek şekilde değiştirin.
  • 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 her boyutta seçim yapabilirsiniz. Çoklu çizgi üzerindeki simgeler için varsayılan ölçek, çizmeye başlıyorsunuz. Ölçeklendirmeden sonra simge 22x22 piksellik bir karenin içinde çapasında ortalanmış olarak gösterilir.
  • strokeColor, simgenin dış çizgisinin rengidir. Tüm CSS3 genişletilmiş adlandırılmış renkler dışında renkler desteklenir. İşaretçilerdeki simgeler için varsayılan renk "siyah"dır. Çoklu çizgi üzerindeki simgeler için varsayılan renk çoklu çizginin fırça rengi.
  • strokeOpacity göreli opaklığı (yani şeffaflık) sunar. Değerler, 0,0 (tümüyle) şeffaf) 1,0 (tamamen opak) olarak değişecektir. Sembol işaretçileri için varsayılan değer: 1.0. Çoklu çizgiler üzerindeki simgeler için varsayılan olarak çoklu çizgi.
  • strokeWeight, simgenin dış çizgisinin ağırlığını tanımlar. İlgili içeriği oluşturmak için kullanılan varsayılan değer, simgenin scale değeridir.

Önceden tanımlanmış simgeler

Maps JavaScript API, verilerinizi hızlı bir şekilde saklamak için işaretçilere veya çoklu çizgilere ekleyebilirsiniz. SymbolPath sınıfı.

Varsayılan simgeler bir daire ve iki tür ok içerir. Her iki forvet geriye doğru oklar mevcut. Bu, özellikle de çünkü çoklu çizgide simgenin yönü sabittir. İleri doğru, sözleşmenin bitişi yönünde kabul edilir çoklu çizgi.

varsayılan sembol seçenekleridir.

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

Ad Açıklama Örnek
google.maps.SymbolPath.CIRCLE Daire.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Tüm yanları kapalı olan, geriye dönük bir ok.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Tüm kenarları kapalı olan ileriyi gösteren bir ok.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Bir tarafta açık olan geriye dönük ok.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Bir tarafta açık olan ileriye dönük ok.

İşaretçiye simge ekleme

Vektör tabanlı bir simgeyi marker ile İşaretçinin konumuna giden istenen yolu içeren Symbol nesne değişmez değeri icon mülkü. Aşağıdaki örnekte, SVG yol gösterimi tıklayın.

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 inceleyin

Örneği Deneyin

Çoklu çizgiye sembol ekleme

Çoklu çizgi üzerinde simge görüntülemek için şu öğenin icons[] özelliğini ayarlayın: PolylineOptions nesnesini tanımlayın. icons[] dizisi, bir veya daha fazla Aşağıdakileri içeren IconSequence nesne değişmez değerleri özellikler:

  • icon (zorunlu), oluşturulacak simgedir çizgisi.
  • offset, çizginin başlangıcından itibaren mesafeyi belirler burada bir simgenin oluşturulacağı yer alır. Bu mesafe, çizgi uzunluğunun yüzdesi (örneğin, "%50") veya piksel cinsinden (örneğin, "%50") örneğin, "50px"). Varsayılan "%100"dür.
  • repeat, cihazda art arda simgeler arasındaki mesafeyi belirler çizgisi. Bu mesafe, çizginin uzunluğunun bir yüzdesi olarak ifade edilebilir. (örneğin, "%50") veya piksel cinsinden (örneğin, "50 piksel"). Tekrarlamayı devre dışı bırakmak için "0" değerini belirtin. Varsayılan değer "0"dır.
ziyaret edin.

Semboller ve PolylineOptions sınıfı kombinasyonuyla haritanızdaki çoklu çizgilerin görünümü ve verdiği izlenim üzerinde çok yüksek düzeyde denetime sahip olursunuz. Aşağıda, uygulayabileceğiniz bazı özelleştirme örnekleri verilmiştir.

Oklar

Şuna ok eklemek için IconSequence.offset özelliğini kullanın: veya çoklu çizginizin başını ya da sonunu seçin.

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

Kesikli çizgiler

Fotoğrafınızın opaklığını ayarlayarak kesikli bir çizgi efekti elde edebilirsiniz. çoklu çizgiyi 0'a getiriyoruz ve düzenli olarak çizginin üzerine opak bir sembol yerleştiriyoruz. sağlar.

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

Özel yollar

Özel semboller, 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 inceleyin

Sembole animasyon ekleme

DOM bağımsız değişkenlerini kullanarak yol boyunca Simgenin uzaklığını değiştirmek için window.setInterval() işlevi atılmasına gerek yoktur.

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 inceleyin

Örneği Deneyin