İçindekiler
NS Google Haritalar Javascript API'si Haritaların bu şekilde oluşturulmasına izin verdiği için son derece güçlüdür, aynı zamanda işlevlerini genişleterek ve ilgi noktaları, açılır pencereler, çizgiler ve rota simülasyonu eklemek için vektörleri kullanarak bir adım daha ileri gidebiliriz.Uyguladığımız ve Javascript ile daha önce çalışmış olsaydık, haritaların güçlü yönlerinden bir diğeri, Etkinliklerdilin özü olan ve kullanıcının web sitesiyle etkileşimini yönetmekten sorumlu olan , bu özel durumda haritamızla olan etkileşim.
Uygulamaya geçmeden önce, API tarafından işlenen olayların arkasındaki teorinin bir kısmını bilmeliyiz, bu, ad alanını kullanır. google.maps.etkinliği onlarla çalışmak için. API ve kontrolöründe tanımlanan olayları dinlemek için statik yöntemlere sahiptir. ekle Dinleyici () onları kaydetmek için.
Bunu bilerek, API'de mevcut olan ve örneklerimizde kullanacağımız en önemli olaylardan bazılarını görelim:
center_changedBu olay, haritanın merkezinin özelliği değiştiğinde tetiklenir.
TıklayınBu olay, kullanıcı haritaya tıkladığında tetiklenir, işaretçilere veya bilgi pencerelerine yapılan tıklamaları hariç tuttuğunu belirtmek önemlidir.
sürüklemekBu olay, kullanıcı haritayı sürüklediğinde tekrar tekrar tetiklenir.
fare hareketiBu olay, kullanıcı faresini harita kapsayıcısında herhangi bir yere hareket ettirdiğinde tetiklenir.
sağ tıkBu olay, DOM bağlam menüsü olayı tetiklendiğinde tetiklenir.
zoom_changedBu olay, haritanın yakınlaştırma özelliği değiştiğinde tetiklenir.
Bu olaylar dünyanın standart olayları gibi görünse de belirtmek önemlidir. GÜNEŞ onlar değil, onlar bir parçası Google Haritalar API'sı. Bu, tarayıcıların farklı olay türlerini işlemesi sorununu önlemek içindir. GÜNEŞ.
tarafından en çok kullanılan olayları zaten görmüş olmak API Haritalarımızın oluşturulmasında bunların kullanımını göstermek için uygulamaya gidelim, bu öğreticinin ilk örneği, harita özelliklerinin değiştirilmesiyle ilgili olaylara odaklanacak, bu da senkronize bir harita işlevselliği elde etmemizi sağlayacak, yani, , merkezlerindeki veya yakınlaştırmalarındaki değişikliklerden bağımsız olarak aynı bilgiyi gösteren farklı tabanlı haritalara sahip olun.
Bu hedefe ulaşmak için izlememiz gereken adımlara bakalım:
1- Önce arayacağımız yeni bir dosya oluşturuyoruz synchronized_maps.html ve API'nin dahil edilmesini, haritalarımızın kapsayıcısının sahip olacağı stiller ile birlikte gerçekleştiriyoruz, program kapsamında bunları kullanmak zorunda kalacağımız için haritaların global değişkenlerini tanımlamak önemlidir:
var map1, map2;
2- Daha önce de belirttiğimiz gibi farklı bazlarda iki haritayı senkronize edeceğiz, bunun için onları başlatan iki fonksiyon oluşturmamız gerekiyor. Bu işlevler, geçmiş öğreticilerde ustalaştığımız işlevlere oldukça benzer olacak, ancak senkronizasyon işlevini elde etmek için olayların işlenmesine sahip olacaklar, ilk işlevin kodunu görelim:
function initializeMap1 () {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'); map1 = yeni google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', işlev () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } Gördüğümüz gibi, haritamızın her zamanki gibi merkezi, yakınlaştırmayı ve tabanı tanımlama seçeneklerine sahibiz, ki bu durumda bu, YOL HARİTASI, ardından seçenekleri haritamıza ve son olarak 1 numaralı haritanın özelliklerinin değerlerini alıp 2 numaralı haritaya ayarlamaktan sorumlu olan olaylarımızı belirledik, bunun için olaylarını kullanacağız. center_changed Y zoom_changed senkronize etmemizi sağlayan şey budur.
3- Ardından ikinci haritayı başlatmak için fonksiyonumuzu oluşturmamız gerekiyor, kod bir öncekine benzer, ancak olaylar 2 numaralı haritadan 1 numaralı haritaya ateşlenecek ve taban HİBRİT ikisi arasındaki farkı göstermek için:
function initializeMap2 () {var mapOptions2 = {center: new google.maps.LatLng (40.41678, -3.70379), yakınlaştırma: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = yeni google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 4- Son olarak, her ikisinin de örneğini yapmamıza izin verecek haritaları somutlaştıracak bir fonksiyon yarattık, HTML ve aynı sınıfı haritalarımızı içerecek div'lere koyarız:
function initializeMaps() {initializeMap1(); initializeMap2(); } google.maps.event.addDomListener (pencere, 'yükle', initializeMaps); Senkronize Haritalar
Alıştırmamızı tarayıcıda çalıştırdığımızda senkronize edilmiş haritalarımızın nasıl göründüğünü görelim:
BÜYÜT
BÜYÜT
1- adlı yeni bir dosya oluşturuyoruz get_koordinatlar.html ve API'mizi stillerle birlikte dahil ediyoruz:
2- Ardından fonksiyonu oluşturuyoruz initializeMap () her zamanki gibi ama bu farklı bir şeye sahip olacak ve olayın tanımı bu Tıklayın içinde addListener Bize tıkladığımız yerin enlem ve boylamı hakkında bilgi sağlayacak bir iletişim kutusunun uygulanmasıyla birlikte görelim:
google.maps.event.addListener (harita, 'tıklama', işlev (e) {if (infowindow! = null) infowindow.close (); infowindow = yeni google.maps.InfoWindow ({içerik: 'Fare koordinatları:
Enlem: '+ e.latLng.lat() +'
Uzunluk: '+ e.latLng.lng (), konum: e.latLng}); infowindow.open (harita); }); 3- Sonunda kendimiz inşa ediyoruz HTML ve harita için kapsayıcımızı tanımlıyoruz:
Fare tıklamasıyla koordinatları alma
Kodumuz bitince haritamızın üzerine tıkladığımızda tarayıcımızda nasıl göründüğünü ve o noktanın enlem ve boylam bilgileri ekrana geldiğini görelim:
BÜYÜT
1- Haritamız ve enlem ve boylam bilgilerini görüntülemekten sorumlu olacak kontrol için API'mizi ekliyoruz ve stillerimizi oluşturuyoruz:
2- Fonksiyonumuzu oluşturuyoruz initializeMap () önceki alıştırmalarda olduğu gibi ve koordinatlarla başlattığımız kontrolümüz için parametreleri tanımlarız 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'haritaKoordinatları'; controlDiv.innerHTML = 'Enlem / Boylam: 0.00 / 0.00'; 3- O zaman kontrolü oluşturup haritamıza eklememiz gerekiyor, bunu ile yapıyoruz google.kontroller, nerede olacağını belirtebiliriz, bu durumda kullanacağız RIGHT_BOTTOM sağ alt kısımda ve görüntüleneceği kapta karşılık gelen:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Son olarak tip olacak olayımızı tanımlıyoruz. fare hareketi ve metni, elde ettiğimiz bilgilerin kontrolüne enjekte edecektir:
google.maps.event.addListener (harita, 'mousemove', function (e) {var CoordinatText = 'Enlem / Boylam:' + e.latLng.lat (). Sabit (6) + '/' + e.latLng. lng().toSabit (6);controlDiv.innerHTML = koordinatText;}); Enlem ve boylam bilgilerini elde etmek için kontrol ile haritamızın nasıl göründüğünü görelim:
BÜYÜT
1- adlı bir dosya oluşturuyoruz. menu_contextual.html ve biz dahil Google Haritalar Javascript API'si, ayrıca haritamız ve bağlamsal menümüz için stiller oluşturuyoruz:
2- Fonksiyonumuzu oluşturmadan önce initializeMap () Birkaç ek adım gerçekleştirmeliyiz, bunlardan biri bağlam menüsü için sınıfı tanımlayacak işlevi oluşturmaktır, bakalım:
fonksiyon menüsüİçeriksel (harita) {this.setMap (harita); this.map = harita; this.mapDiv = map.getDiv(); this.menuDiv = boş; }; 3- Bu yapıldıktan sonra, bağlamsal menümüz için seçenekler oluşturmalı ve seçildiğinde bunların her birini tetikleyecek olayı eklemeliyiz ki bu, tahmin edeceğimiz gibi olacaktır. Tıklayın:
menuContextual.prototype = yeni google.maps.OverlayView (); menuContextual.prototype.draw = fonksiyon () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'bağlam menüsü'; this.menuDiv.innerHTML = 'Yer İşareti Oluştur
yakınlaştır
Yakınlaştırmayı Geri Al
'; this.getPanes ().floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'tıklama', işlev (mouseEvent) {that.hide ();}); }; 4- Bağlamsal menümüzü bitirmek için sadece gösteri ve gizleme eylemlerini eklememiz gerekiyor, bunun için kod bölümümüzün nasıl göründüğüne bakalım:
menuContextual.prototype.show = fonksiyon (koordinat) {var proje = this.getProjection (); var mouseCoords = proje.fromLatLngToDivPixel (koordinat); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blok'; this.menuDiv.style.left = sol + 'px'; this.menuDiv.style.top = üst + 'px'; this.menuDiv.style.visibility = 'görünür'; }; menuContextual.prototype.hide = fonksiyon (x, y) {this.menuDiv.style.visibility = 'gizli'; } 5- Bağlamsal menümüzü bitirdikten sonra, sadece menümüzdeki seçenekler için yakınlaştırma, yakınlaştırmayı geri alma ve bir işaretçi yerleştirme fonksiyonlarını programlamamız gerekiyor:
fonksiyon doZoom () {map.setZoom (map.getZoom () + 1); } işlevi geri alma () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCo Coordinat, map: map, title: 'Random Marker'}); } 6- Son olarak, burada önemli olanın haritayı oluşturmak olduğu haritamızı başlatıyoruz. bağlamsal menü haritamız için ve ana olayı tanımlayın sağ tık basıldığında sağ fare tıklamasıyla tetiklenecek olan:
bağlamMenu = yeni menüİçeriksel (harita); google.maps.event.addListener (harita, 'sağ tıklama', işlev (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Kendimizi yaratırız HTML geleneksel yolla ve örneğimizi çalıştırın, haritamıza sağ tıkladığımızda bağlam menümüzün nasıl göründüğüne bakalım:
BÜYÜT
BÜYÜT
