İçindekiler
tarafından sunulan hizmetler Google Haritalar Javascript API'si işlevsel oldukları kadar çeşitlidirler, farklılaşan bir niteliğe sahiptirler. Google haritaları Rakiplerinden, bu hizmetler genellikle eşzamansız olarak çalışır, bu da isteğin harici bir sunucuya yapılmasına izin verir ve yanıtları işlemekten bir geri arama türü yöntemi sorumludur.Bu hizmetlerin güçlü yönlerinden biri, API sınıfları ve nesneleri ile tamamen uyumlu olmalarıdır. Haritamızdaki belirli bir noktanın adresine bakmaktan sokak görünümünü uygulamaya bile geçebiliriz.
Örneklere geçmeden önce, bu eğitimde kullanacağımız en önemli hizmetlerden bazılarını görelim.
Coğrafi kodlamaBu hizmet, ortak adresleri bir noktanın enlem ve boylamına dayalı olarak coğrafi koordinatlara dönüştürmemize olanak tanır, bu, işaretçileri yerleştirmemize veya haritamızı konumlandırmamıza, bu işlemleri gerçekleştirmek için API'nin sağladığı bir sınıf sağlar. coğrafi kodlayıcı ().
Mesafe matrisiBu hizmet, günümüzde yaygın olarak kullanılan, birden fazla nokta arasındaki rotanın mesafesini ve süresini hesaplamamıza yardımcı olur, bunun için amacımız var. google.maps.DistanceMatrixService ve bununla ilişkili yöntemler.
Sokak GörünümüHizmet Sokak Görünümü veya sokak görünümü, kapsadığı alanlarda bize 360 derecelik panoramik görüntüler sunar, bu da haritalarımızı şüphesiz öne çıkaracak bir şeydir.
Google Haritalar'da Javascript API'sini anlamak için Google Haritalar'da API'nin çalışmasını ve olay işlemeyi ve Giriş bölümünü burada ayrıntılı olarak anlattığımı unutmayın.
Bu örneği gerçekleştirmek için hizmeti kullanacağız coğrafi kodlayıcı () Ancak bahsettiğimiz gibi, bu bir adresi koordinata dönüştürmemize izin veriyor, bu iyi, ancak geleneksel kullanıcı için pek faydası olmayan bir şey, bu yüzden kullanacağız. ters coğrafi kodlayıcı tek tıkla ihtiyacımız olan adresi almak için. Şimdi izlememiz gereken adımlara bakalım:
1- İlk olarak, zaten bildiğimiz gibi, kimlik bilgilerimizi kullanmayı unutmadan API'yi ekliyoruz, buna ek olarak kütüphaneyi de ekleyeceğiz. resim çizme Bu, çizim işaretçilerinin işlevselliğini uygulamamıza izin verecek, aşağıda göreceğimiz gibi bu kütüphaneyi & sembolü ile kimlik bilgimize birleştiriyoruz:
2- Haritaya sayfadaki görselleştirme türünü verecek olan ve aynı zamanda kodumuzun tüm yöntemlerinde global bir kapsamı olacak global değişkenleri tanımlayan stilleri unutamayız:
var haritası; var geocoder var açılır pencere;
3- Bundan sonra metodumuzu tanımlıyoruz initializeMap () yapacağımız ilk şey, tür nesnemizi ilan etmek coğrafi kodlayıcı bize sınıftan yardım Coğrafi kodlayıcı () Ve birlikte bilgi penceresi adresi ekranda gösterecek olan açılır pencerenin nesnesi:
function initializeMap() {geocoder = new google.maps.Geocoder(); açılır pencere = yeni google.maps.InfoWindow(); 4- Haritanın merkez, yakınlaştırma ve taban türü gibi geleneksel seçeneklerini dahil ediyoruz, elemanı elde ediyoruz GÜNEŞ ve yöntemi somutlaştırıyoruz Harita:
google.maps.visualRefresh = doğru; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), yakınlaştırma: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = yeni google.maps.Map (mapElement, mapOptions); 5- Şimdi işaretçileri çizmemize izin verecek çizim yöneticisini oluşturuyoruz, bunun için bir örneğini yapacağız. ÇizimYöneticisi, kullanıcı arayüzünde görünür hale getiriyoruz ve kontrolde hangi modların gösterileceğini ve hangi konumda olacağını seçiyoruz:
var DrawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, DrawingControl: true, DrawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, DrawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Şimdi yeni oluşturulan işlevselliği etkinleştiriyoruz, etkinliğimiz için dinleyiciyi ekliyoruz ve gerçekleştiriyoruz ters coğrafi kodlayıcı yöntemi ile işaretçimizin enlem ve boylamdaki konumunu elde ederiz getPosition ():
çizimManager.setMap (harita); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- Tamamlamak için ters coğrafi kodlayıcı hizmetini kullanacağız coğrafi kod () ve eğer işlemezsek hizmetin geçerli bir yanıt döndürdüğünü doğrulamak için bir koşullu yapacağız, böylece kullanıcının başarısız olduğunu bilmesini sağlayacağız ve sonuç doğruysa yöntemimizi çağıracağız. Adresi Göster ():
geocoder.geocode ({'latLng': markerPosition}, function (sonuçlar, durum) {if (status == google.maps.GeocoderStatus.OK) {if (sonuçlar) {ShowAddress (sonuçlar [0], işaretçi);}} else {alert ("Hizmet başarısız oldu:" + durum);}}); 8- Son olarak, sadece yöntemi oluşturmamız gerekiyor. Adresi Göster () ters jeokodlayıcımızın sonucunu ve işaretçinin konumunu alacak, bununla merkezi kurabilir ve formatlanmış adresin bilgilerini sorunsuz bir şekilde görüntüleyebiliriz:
function ShowAddress (sonuç, işaretleyici) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adres: '+ sonuç.formatted_address; popup.setContent (popupContent); popup.open (harita, işaretleyici); } 9- Örneğimizi tamamlamak için ilgili etiketleri kapatıyoruz ve HTML kodunun bir kısmını ekliyoruz:
Tek tıklamayla harita üzerinde adresi bulun
10- Tarayıcımızda çalıştırıyoruz ve haritamızdaki herhangi bir noktaya tıklıyoruz ve bildirdiğimiz açılır pencerede gösterilen adresi alacağız, aşağıdaki gibi görünmelidir:
BÜYÜT
NS Google Haritalar Javascript API'si bize oldukça faydalı hizmetler sunuyor, bunlardan biri mesafe matrisi birden fazla nokta arasındaki mesafeyi ve süreyi hesaplamamızı sağlayan, teslimat sürelerini hesaplamaktan veya çeşitli noktalar arasında en uygun rotayı oluşturmaktan herhangi bir işte farklı çözümler uygulamak için kullanabileceğimiz bir işlevsellik. Bu işlevi haritalarımız arasında uygulamak için izlememiz gereken adımlara bakalım.
1- API'mizi kütüphane ile birlikte dahil ediyoruz resim çizme, haritamızın ve matrisimizin kapsayıcısının görüntülenmesi için stillerin yanı sıra:
2- Kodumuzun kapsamı boyunca ve fonksiyonda kullanılmak üzere global değişkenler tanımlarız initializeMap () Hem başlangıç hem de hedefin enlem ve boylamını işlemek için dizileri başlatırız:
var haritası; var OriginLatLon; var targetLatLon; var mesafeMatrixService; var markerCount; var arrayResult; function initializeMap() {originLatLon = []; hedefLatLon = []; 3- Daha sonra aynı fonksiyonda butonu ve bunun için olay işleyicisini elde ederiz, ayrıca nesneyi hizmet için başlatırız. MesafeMatrisiHizmet işaretçilerin sayacının yanı sıra dizinin sonucunu bir kap div'e atayın:
var createBtnMatrix = document.getElementById ('generateMatrix'); createBtnMatrix.addEventListener ('tıklama', işlev () {MatrixRequest ();}); mesafeMatrixService = yeni google.maps.DistanceMatrixService (); markerCount = 0; sonuç dizisi = document.getElementById ('sonuç dizisi'); 4- Merkez, yakınlaştırma ve taban türü gibi haritanın geleneksel seçeneklerini dahil ediyoruz, elemanı elde ediyoruz GÜNEŞ ve yöntemi somutlaştırıyoruz Harita:
google.maps.visualRefresh = doğru; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), yakınlaştırma: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = yeni google.maps.Map (mapElement, mapOptions); 5- Bir önceki alıştırmada olduğu gibi, işaretçileri çizmemize izin verecek çizim yöneticisini oluşturduk, bunun için bir örnek yapacağız. ÇizimYöneticisi ve gerekli seçenekleri sağlıyoruz, etkinleştiriyoruz ve olay için dinleyiciyi ekliyoruz:
var çizimManager = new google.maps.drawing.DrawingManager ({drawingMode: null, DrawingControl: true, DrawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, DrawingModes: [google.maps.drawing.OverlayType.MARKER]}}); çizimManager.setMap (harita); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Bundan sonra izin verilen hedef sayısını sınırlamak için doğrulamaları gerçekleştiriyoruz ve yer imlerimiz için kullanacağımız simgeleri ayarlıyoruz:
markerCount ++; if (markerCount> 10) {alert ("Daha fazla hedefe izin verilmez"); DrawingManager.setMap (boş); marker.setMap (boş); geri dönmek; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / çizgi roman.png.webp'); } else {originLatLon.push (marker.getPosition()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Şimdi yalnızca hizmete yapılan istekleri işlemek için işlevlerimizi oluşturmamız gerekiyor. mesafeMatrisHizmet, önce request özelliğini hazırlayacak olanı oluşturuyoruz:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({kökenler: LatinSource, hedefler: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Geri arama için, hizmetin yanıtını almamızı sağlayacak ve hizmetin hatayı en iyi şekilde çözememesi durumunda gerekli doğrulamaları dahil edeceğimiz işlevi oluşturuyoruz:
function getResultMatrix (sonuç, durum) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var OriginAddresses = result.originAddresses; var targetAddresses = result.destinationAddresses; for (var i = 0, l = OriginAddresses.length; i <l; i ++) {var elementler = result.rows [i] .elements; for (var j = 0, m = elementler.length; j <m; j ++) {var OriginAddress = OriginAddresses [i]; var hedefAdres = hedefAdresler [j]; var eleman = elemanlar [j]; var mesafe = element.distance.text; var süre = element.duration.text; sonuçlarDivMatrix (originAddress, hedefAddress, mesafe, süre, i, j); }}} else {alert ('Dizi alınamadı:' + durum); } 9- Ek olarak, ilgili div'de elde edilen sonuçları yazacak işlevi yaratıyoruz:
functionDivMatrixResults (originAddress, targetAddress, mesafe, süre, OriginAddressCount, targetAddressCount) {var mevcutContent = resultResult.innerHTML; var newContent; yeniİçerik = 'Origin '+ countLetters (originAddressCount) +':
'; newContent + = orijinAdres + '
'; yeniİçerik + = 'Destination '+ countLetters (destinationAddressCount) +':
'; newContent + = hedefAdres + '
'; yeniİçerik + = 'Kader: '+ mesafe +'
'; yeniİçerik + = 'Kader: '+ süre +'
'; yeniİçerik + = '
'; sonuçArray.innerHTML = mevcutContent + newContent; } 9- Son olarak bizim Javascript Sayaçları, yerleştirdiğimiz işaretçinin sayacına karşılık gelen adı döndürmek için bir fonksiyonda ele alıyoruz:
function countLetters (count) {switch (count) {case 0: 'Comics Store' döndür; durum 1: 'Video Oyun Mağazası'nı iade edin; durum 2: 'Comics Store'u iade edin; durum 3: 'Comics Store'u iade edin; durum 4: 'Video Oyun Mağazası'nı iade edin; varsayılan: null döndür; }} 10- İlgili etiketleri kapatıyoruz ve kodun bir kısmını ekliyoruz HTML Örneğimizi tamamlamak için:
Mesafe matrisini kullan
11- Örneğimizi tarayıcıda çalıştırıyoruz ve haritamızın işleyişini görselleştirmek için 4 tane ilgi noktası yerleştirip butona basıyoruz. Mesafe Matrisi Oluştur:
BÜYÜT
Bu öğreticiyi bitirmek için hizmeti uygulayacağız Sokak Görünümü, Oldukça basit bir örnek ama mevcut diğer hizmetlere eklenen bu, haritalarımızı diğerlerinden üstün kılacaktır, bu hizmeti uygulamak için ne yapmamız gerektiğine bakalım:
1- API'yi dahil ettik ve ilgili stilleri tanımladık, bu örnekte çizim kitaplığını kullanmayacağız, bu nedenle dahil edilmeyecektir:
2- Global değişkenlerimizi tanımlıyoruz ve fonksiyonumuzu oluşturuyoruz initializeMap () Konvansiyonel seçenekler, haritamızın merkezi, yakınlaştırma ve taban tipi ile elementi elde ederiz. GÜNEŞ ve yöntemi somutlaştırıyoruz Harita:
var haritası; var geocoder; var streetView; function initializeMap() {popup = yeni google.maps.InfoWindow(); geocoder = yeni google.maps.Geocoder(); google.maps.visualRefresh = doğru; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), yakınlaştırma: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = yeni google.maps.Map (mapElement, mapOptions); 3- Fonksiyonumuz içinde hizmetini çağırıyoruz. Sokak Görünümü ve bundan sonra konum ve bakış açısı gibi seçeneklerini ayarlamak için bir fonksiyon oluşturuyoruz:
streetView = map.getStreetView(); } function setOptionsStreetView (konum) {streetView.setPosition (konum); streetView.setPov ({başlık: 0, kaşıntı: 10}); } 4- Son olarak, haritanın geleneksel görünümü ile harita görünümü arasında geçiş yapabilmek için işlevler oluşturuyoruz. Sokak Görünümü, bakalım bunlar neye benziyor:
function showMap() {streetView.setVisible (yanlış); } işlev showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (doğru); } 5- İlgili etiketleri kapatıyoruz ve kodun bir kısmını ekliyoruz HTML Örneğimizi tamamlamak için:
Sokak Görünümlü Harita
6- Örneğimizi tarayıcıda çalıştırıyoruz ve butona basıyoruz Sokak Görünümünü Göster Aşağıdaki resimde görebileceğimiz gibi işlevselliği görselleştirmek için:
BÜYÜT
Bununla, mevcut hizmetleri takdir edebildiğimiz için bu öğreticiyi sonlandırıyoruz. Google Haritalar Javascript API'si Haritalarımızın fonksiyonlarını çok daha fazla genişletmemizi sağlıyor, konum ve zaman ve/veya mesafe hesaplamaları kullanması gereken, uyguladığımız sistemlerde dikkate alınması gereken bir seçenek olarak konumlandırıyorlar.
Size aynı zamanda kullanışlı olacak bu öğreticiyi hatırlatıyorum: Google Haritalar'da vektörlerin kullanımını öğreninBu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
