Google Haritalar'da vektörlerin kullanımı

ile oluşturulan haritalar Google Haritalar Javascript API'si Her zaman statik olmayacaklardır, çoğu zaman görselleştirme için kullanılsalar da, bu her zaman böyle değildir, bu nedenle bazen ek bilgileri gösterebilmeleri için kapsamlarını genişletmemiz gerekeceği durumlar olacaktır.
Eklememiz gereken bu ek bilgi, vektör tarafından kullanılan her türlü vektörün bulunduğu noktalardan oluşan şekillerden başka bir şey değildir. API Arandılar bindirmeler veya kaplama.
ÖneriGeçmiş eğitimlerde, giriş bölümünü gördük API, en önemli seçenekleri inceledik, geliştiriciler için kimlik bilgilerinin nasıl alınacağını öğrendik. Google ve kullanımının bazı basit örneklerini yapıyoruz, bu nedenle bu öğreticinin içeriğini okumadan veya burada belirtilen örnekleri yapmadan önce bu eğiticiye bir göz atmanızı öneririz.
Önerilen öğreticiyi gözden geçirdikten ve bağlam içinde kaldıktan sonra, API ile oluşturulan haritalarımızda vektörlerin kullanımını daha iyi anlamak için pratik örneklere geçelim.
ile oluşturulan haritaların kullanımı API çoğunlukla ana işlevinin bir şirketin veya işletmenin yerini göstermek olduğu web sitelerinde yoğunlaşır. buna bir diyebiliriz ilgi konusu onu bir vektör türüyle sorunsuz bir şekilde temsil edebileceğimizi, Google Haritalar Javascript API'si olarak bilinir işaretleyici.
Lafı fazla uzatmadan, standart bir işaretçiyi ve buna ek olarak özel bir işaretçiyi haritamızda uygulamak için izlememiz gereken adımlara bir göz atalım.
1- Yapmamız gereken ilk şey, API ve haritamızın görselleştirilmesi için stiller, bizim kullanmamız gerektiğine dikkat etmek önemlidir. Google geliştirici kimlik bilgisi bu örneğin doğru çalışması için:

2- Global değişkenlerimizi, sözde bir haritayı ve alanı çevreleyen koordinatlara göre rastgele işaretler oluşturmak için kullanacağımız bir dizi değişkeni tanımlarız. Madrid.:

 var haritası; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Ardından haritamızın en önemli seçeneklerini içerecek olan başlatma fonksiyonunu şu şekilde tanımlıyoruz: yakınlaştırma, harita ve merkez koordinatları için temel tip bu durumda hangisi olacak Madrid, alırız İD tarafından div'in GÜNEŞ, haritayı başlatıyoruz ve işaretçileri harita üzerinde konumlandırdığımızda olayları işlemek için bir fonksiyon tanımlıyoruz, biraz önce tanımladığımız kod segmentine bakalım:

 function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), yakınlaştırma: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = yeni google.maps.Map (mapElement, mapOptions); eventMarker(); } 

4- Şimdi fonksiyonumuzu oluşturmalıyız olaylarİşaretleyici () tanımında iki farklı bağlantıdan basılan kimliğe göre tıklama başına bağlı iki olaya sahip olacak ve yer imlerini ayarlamaktan sorumlu olacak iki işlevi daha çağıracak:

 functionMarkerEvents () {document.getElementById ('add_Marker').addEventListener ('tıklama', işlev () {addMarker ();}); document.getElementById ('add_person_Marker').addEventListener ('tıklama', function () {addPersonMarker ();}); } 

5- İşaretçileri ayarlayacak iki işlevi oluşturmadan önce, koordinatlar üzerinde bazı çalışmalar yapmak önemlidir, böylece bize o aralıkta rastgele değerler verirler ve bunlar tarafından yorumlanabilirler. Google Haritalar Javascript API'si, bunu koordinatların global değişkenleri üzerinde bazı aritmetik işlemlerle yapacağız, karşılık gelen fonksiyonu görelim:

 function createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random(); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random(); var newLng = minLng + rndNumLng * deltaLng; yeni google.maps.LatLng (newLat, newLng) döndür; } 

6- Bu yapıldıktan sonra, işaretçileri haritamıza sabitlemek için fonksiyonlarımızı oluşturabiliriz, bunun için metod ile yapıyoruz. İşaretleyici Standart bir işaretleyici oluşturmak için ve önceki işlevle, gösterileceği rastgele koordinatı oluştururuz:

 function addMarker() {var koordinat = createLgRandom(); var marker = new google.maps.Marker ({konum: koordinat, harita: harita, başlık: 'Random Marker -' + markerId}); işaret Kimliği ++; } 

Bizimkine geçmeden önce özel yer imi Simgelere dayalı olduğunu ve bunların projemizin dizininde bulunması gerektiğini belirtmek önemlidir, bu alıştırma için mapicons sayfasında bulunan bazı ücretsiz simgeler kategori altında kullanılmıştır. işaretçiler, bu yüzden bizim için sorunsuz çalışacaklar, bunun için bazılarını indirip adlı bir klasöre yerleştiriyoruz. resim aşağıdaki resimde görebileceğimiz gibi projemizin kökünde yer almaktadır:

BÜYÜT

7- Simgelerimizi aldıktan sonra sadece fonksiyonumuzu oluşturmamız gerekiyor, bunun için simgelerimizin isimleriyle bir dizi oluşturuyoruz ve onları rastgele çalıştıracağız, yöntemimize ek bir parametre vererek İşaretleyici isminde simge işaretçiyi ayarlamak için indirilen görüntüyü kullanacak olan:

 function addPersonMarker () {var markerIcons = ['çizgi roman', 'video oyunları', 'bilgisayar', 'sıcak yemek', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var koordinat = createLaLgRandom(); var marker = new google.maps.Marker ({konum: koordinat, harita: harita, simge: 'img /' + markerIcons [rndMarkerId] + '.png.webp', başlık: 'Random Marker -' + markerId}); işaret Kimliği ++; } 

8- Son olarak, haritamızı başlatmak için event ekliyoruz ve eventlerimiz için tanımladığımız ID'lerle ilgili fonksiyonları çağıracak olan div'imizden önce iki link oluşturuyoruz:

 google.maps.event.addDomListener (pencere, 'yükle', initializeMap); Yer imleri ekle
Yer İşareti Ekle | Özel Yer İşareti Ekle

Bununla, ekleyebilme işlevine sahip haritamıza zaten sahibiz. standart işaretleyiciler Y gelenek Seçtiğimiz şeye göre, istediğimiz kadar yer imi ekleyebileceğimizi belirtmek önemlidir, bu API'nin çalışmasını görmemizi sağlayacaktır, bitirmek için tarayıcımızda çalıştırdığımızda nasıl göründüğüne bakalım:

BÜYÜT

Web'de bulduğumuz ve harita görüntüleyen tüm uygulamalarda, işaret ettikleri nokta ile ilgili bilgileri gösterme olasılığını dışlamazlar, bu nedenle bir açılır veya açılır pencere ekleme olanağımız vardır. bilgileri haritamızda belirli bir konuma veya hatta bir işaretçiye göre görüntülemek için bunu nasıl yapabileceğimize bakalım:
1- Yeni bir dosya oluşturacağız add_popup.html ve yeni işlevleri eklemek için önceki örneği temel alacağız, bunun için haritamızın kodunu kopyalayıp yapıştıracağız ve işlevi bulacağız initializeMap () ID'yi aldıktan sonra, InfoWindow yöntemiyle haritamızın merkezi için açılır pencereyi tanımlayacağız, yukarıda belirtilen işlevin kodunu görelim:

 var infowindow = new google.maps.InfoWindow ({content: 'Pop-up içeriği:
Bu açılır pencere, Madrid olan haritanın merkezini gösterir.', konum: yeni google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (harita); 

2- Şimdi fonksiyonumuzu değiştireceğiz addMarker () haritamızda görünen her işaretçiye bir açılır pencere eklemek için, bunun için işlevi tekrar kullanacağız Bilgi Penceresi () ve method örneği ile tanımladığımız değişken için bir event ekleyeceğiz, bakalım:

 function addMarker() {var koordinat = createLgRandom(); var marker = new google.maps.Marker ({konum: koordinat, harita: harita, başlık: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (işaretleyici, 'tıklama', işlev () {infowindow.open (harita, işaretleyici);}); işaret Kimliği ++; } 

3- Bu yapıldıktan sonra, eklediğimiz açılır pencerenin işlevselliği ile haritamızın nasıl göründüğüne bakalım:

BÜYÜT

4- Son olarak yer imlerimize uyguladığımız benzer işlevselliği görelim, bunu linke basarak yapıyoruz İmi eklemek:

BÜYÜT

Gördüğümüz gibi, haritalarımızın ve işaretçilerimizin işlevselliğini genişletmek oldukça basit, bunu başarmak için sadece uygun yöntemleri kullanmamız gerekiyor.
Vektörlerin gücünü, ilgi noktalarını bir harita üzerinde göstererek zaten test etmiştik. işaretçilerAncak vektörleri çizgi çizmek ve iki nokta arasındaki rotayı haritamızda göstermek için kullanabiliriz, şimdi nasıl yaptığımıza bakalım:
1- adlı bir dosya oluşturacağız. add_line.html ve ilk örneğin stillerinin yanı sıra API'mizi de dahil edeceğiz, şimdi buradan giden koordinatları tanımlayacağız. Madrid ile Barselona, görelim:

 var koordinatları Doğru = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974.22033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Haritamızın başlatma fonksiyonuna geçmeden önce fonksiyonu oluşturacağız. addLine () Burada yapacağımız ilk şey, koordinat dizisini yinelemek ve bir tür nesne içeren yeni bir dizi oluşturmaktır. LatLng, görelim:

 function addLine () {var pointCount = koordinatLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (koordinatLine [i] [0], koordinatLine [i] [1]); linePath.push (tempLatLng); } 

3- Ardından çizgimiz için renk, opaklık ve kalınlık gibi özellikleri ayarlıyoruz. Bunu yaptıktan sonra sadece metoda göndermemiz gerekiyor. çoklu çizgi seçenekleri parametre olarak belirleyin ve çoklu çizgi değişkenini geçerli haritaya ayarlayın:

 var lineOptions = {yol: linePath, vuruşAğırlığı: 7, vuruşRenk: '# 313cac', vuruşOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (harita); } 

4- Sonunda iyi bilinen fonksiyonumuzu oluşturuyoruz initializeMap () ve sonunda MarkerEvents adında bir fonksiyona sahip olmak yerine, bu satırı fonksiyonumuzun adıyla değiştireceğiz. addLine (), HTML'mizi oluşturuyoruz ve tarayıcımızda çalıştırıyoruz, şöyle görünmelidir:

BÜYÜT

Önceki örnekte haritamıza bir çizgi ekliyoruz ve böylece aralarındaki rotayı göstermek için iki noktanın birliğini gösteriyoruz, ancak bu örnek, açıklayıcı olmasına rağmen hala bir şeyden yoksun ve bu iki nokta arasındaki hareketliliği gösterme gerçeğidir. , hareket eden bir araba gibi.
Bu kulağa oldukça karmaşık gelebilir, ancak sınıfların ve yöntemlerin yardımıyla öyle değil. API Birkaç satır kod ile çözebiliriz, bakalım nasıl yapacağız:
1- İlk şey, bizim API, stillerimizi ve global değişkenlerimizi tanımlarız, aynı yolu kullanmak için önceki örneğin aynı koordinatlarını kullanırız, ayrıca değişkeni tanımlarız çoklu çizgi tüm kapsamımızda kullanabilmek için global olarak Javascript:

 var haritası; var polyline; var koordinatları Doğru = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974.22033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Şimdi fonksiyonumuzu oluşturuyoruz addAnimatedLine () işleve benzer bir yapıya sahip olacak addLine () Ancak önceki örnekte bu fonksiyon, bu iki nokta arasındaki hareketli nesneyi göstermek için kullanacağımız sembolün tanımına sahip olacaktır, bu durumda bir ok kullanacağız:

 var arrowSymbol = {strokeColor: '# 000', scale: 3, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Son olarak sadece bu değişkeni seçeneğe ayarlamamız gerekiyor. simgeler çizginin tanımından:

 var lineOptions = {yol: linePath, simgeler: [{icon: ok sembolü}], vuruşAğırlığı: 3, vuruşRenk: '# 313cac', vuruşOpacity: 0.8} 

4- Bu yapıldıktan sonra sadece ikonumuzu canlandırmamız gerekiyor ve bunu fonksiyon adı verilen fonksiyonda yapıyoruz. canlandırmakOk () fonksiyonun tanımının sonuna eklememiz gereken addAnimatedLine () Bakalım fonksiyon neler içeriyor:

 function animateArrow () {var sayıcı = 0; var accessVar = window.setInterval (fonksiyon () {sayaç = (sayaç + 1)% 100; var oklar = çoklu çizgi.get ('simgeler');oklar [0] .offset = (sayaç / 2) + '%'; polyline.set ('simgeler', oklar);}, 50); } 

5- Bitirmek için haritamızı zaten bildiğimiz gibi başlatıyoruz ve fonksiyonumuzu çağırıyoruz. addAnimatedLine ()Bakalım tarayıcımızda nasıl göründüğünü çalıştırırken, okun noktadan noktaya hareket etme etkisine sahip olduğunu belirtmekte fayda var:

BÜYÜT

Bu son örnekle bu öğreticiyi sonlandırıyoruz, çünkü haritalarımızda vektörlerin kullanımının işlevselliklerini ve kullanışlılıklarını artırmamıza izin verdiğini ve bize yerleştirdiğimiz noktalara alternatif rotalara kadar ilgi çekici noktaları uygulama imkanı verdiğini görebiliyoruz. .Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.