- Giriş
- Bir simgenin özellikleri
- Önceden tanımlanmış simgeler
- İşaretçiye sembol ekleme
- Çoklu çizgiye sembol ekleme
- 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ünscale
ö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, simgeninscale
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;
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 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.
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 });
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 });
Ö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 });
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;
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;