Giriş
Bindirmeler, harita üzerinde enlem/boylam koordinatlarına bağlı nesnelerdir. Bu nedenle, haritayı sürüklediğinizde veya yakınlaştırdığınızda hareket ederler. Önceden tanımlanmış yer paylaşımı türleri hakkında bilgi için Harita üzerinde çizim bölümüne bakın.
Maps JavaScript API, kendi özel yer paylaşımlarınızı oluşturmanız için bir OverlayView
sınıfı sunar. OverlayView
, yer paylaşımlarınızı oluştururken uygulamanız gereken çeşitli yöntemleri sağlayan bir temel sınıftır. Sınıfta, ekran koordinatları ve harita üzerindeki konumlar arasında çeviri yapmayı mümkün kılan birkaç yöntem de sunuluyor.
Özel yer paylaşımı ekle
Özel bir yer paylaşımı oluşturmak için gereken adımların özeti şu şekildedir:
- Özel yer paylaşımı nesnenizin
prototype
özelliğini yeni birgoogle.maps.OverlayView()
örneği olarak ayarlayın. Gerçekte, bu, yer paylaşımlı sınıfı alt sınıfı oluşturur. - Özel yer paylaşımınız için bir kurucu oluşturun ve tüm başlatma parametrelerini ayarlayın.
- Prototipinizde bir
onAdd()
yöntemi uygulayın ve bindirmeyi haritaya ekleyin. Harita, bindirmenin eklenmesi için hazır olduğundaOverlayView.onAdd()
çağrılır. - Prototipinizde bir
draw()
yöntemi uygulayın ve nesnenizin görsel görüntüsünü yönetin. Nesne ilk kez görüntülendiğindeOverlayView.draw()
çağrılır. - Yer paylaşımına eklediğiniz öğeleri temizlemek için de bir
onRemove()
yöntemi uygulamanız gerekir.
Aşağıda her bir adımla ilgili daha fazla ayrıntı verilmiştir. Tam, çalışan örnek kodu görebilirsiniz: örnek kodu görüntüleyin.
Yer paylaşımını alt sınıflandırma
Aşağıdaki örnekte basit bir görüntü bindirme oluşturmak için OverlayView
kullanılmıştır.
Şimdi USGSOverlay
sınıfı için bir kurucu oluşturacağız ve iletilen parametreleri yeni nesnenin özellikleri olarak başlatacağız.
TypeScript
/** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { private bounds: google.maps.LatLngBounds; private image: string; private div?: HTMLElement; constructor(bounds: google.maps.LatLngBounds, image: string) { super(); this.bounds = bounds; this.image = image; }
JavaScript
/** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { bounds; image; div; constructor(bounds, image) { super(); this.bounds = bounds; this.image = image; }
Bu bindirmeyi henüz bindirme oluşturucuda haritaya ekleyemiyoruz. Öncelikle, haritadaki tüm bölmelerin kullanılabilir olduğundan emin olmamız gerekir. Bunun nedeni, bu bölmelerin haritada nesnelerin görüntülendiği sırayı belirttiğinden. API, bunun gerçekleştiğini belirten yardımcı bir yöntem sağlar. Bu yöntemi bir sonraki bölümde ele alacağız.
Yer paylaşımını başlatma
Bindirme ilk örneklendiğinde ve görüntülenmeye hazır olduğunda, tarayıcının DOM'si aracılığıyla haritaya eklememiz gerekir. API, yer paylaşımının onAdd()
yöntemini çağırarak haritaya yer paylaşımının eklendiğini gösterir. Bu yöntemi işlemek amacıyla resmimizi saklayacak bir <div>
oluşturur, bir <img>
öğesi ekler, bunu <div>
öğesine ekler ve ardından bindirmeyi haritanın bölmelerinden birine ekleriz. Bölme, DOM ağacındaki bir düğümdür.
MapPanes
türündeki bölmeler, haritadaki farklı katmanların yığınlanma sırasını belirtir. Aşağıdaki bölmeler kullanılabilir ve aşağıdan yukarıya doğru üstlendikleri sıraya göre sıralanmıştır:
mapPane
, en alt bölmedir ve karoların üzerindedir. DOM etkinliklerini alamayabilir. (0. Sıra).overlayLayer
; çoklu çizgiler, poligonlar, zemin yer paylaşımları ve karo katmanı yer paylaşımları içerir. DOM etkinliklerini alamayabilir. (1. Sıra).markerLayer
işaretçiler içeriyor. DOM etkinliklerini alamayabilir. (2. Panel).overlayMouseTarget
, DOM etkinliklerini alan öğeler içeriyor. (3. Sıra).floatPane
, bilgi penceresini içeriyor. Tüm harita yer paylaşımlarının üzerindedir. (Pane 4).
Görüntümüz bir "zemin bindirme" olduğundan overlayLayer
bölmesini kullanacağız. Bu bölmeyi aldığımızda, nesnemizi bir alt öğe olarak ekleriz.
TypeScript
/** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes()!; panes.overlayLayer.appendChild(this.div); }
JavaScript
/** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes(); panes.overlayLayer.appendChild(this.div); }
Bindirmeyi çizin
Yukarıdaki kodda herhangi bir özel görsel görünüm çağırmadığımızı unutmayın. API, ilk eklendiği zaman da dahil olmak üzere, bindirmeyi haritada çizmesi gerektiğinde yer paylaşımında ayrı bir draw()
yöntemi çağırır.
Dolayısıyla bu draw()
yöntemini uygulayacak, getProjection()
kullanarak yer paylaşımının MapCanvasProjection
bilgisini alacak ve nesnenin sağ üst ve sol alt noktalarının sabitleneceği tam koordinatları hesaplarız.
Ardından <div>
boyutunu yeniden boyutlandırabiliriz. Ardından, resmi bindirme kurucuda belirttiğimiz sınırlarla eşleşecek şekilde yeniden boyutlandırır.
TypeScript
draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } }
JavaScript
draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest(), ); const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast(), ); // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } }
Özel yer paylaşımını kaldırma
Bindirmenin haritadan temiz bir şekilde kaldırılması için bir onRemove()
yöntemi de ekleriz.
TypeScript
/** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { (this.div.parentNode as HTMLElement).removeChild(this.div); delete this.div; } }
JavaScript
/** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { this.div.parentNode.removeChild(this.div); delete this.div; } }
Özel yer paylaşımını gizleme ve gösterme
Bir yer paylaşımını oluşturmak veya kaldırmak yerine gizlemek veya göstermek isterseniz yer paylaşımının görünürlüğünü ayarlamak için kendi hide()
ve show()
yöntemlerinizi uygulayabilirsiniz. Alternatif olarak, bindirmeyi haritanın DOM'sinden çıkarabilirsiniz. Ancak bu işlem biraz daha pahalıdır. Yer paylaşımını daha sonra haritanın DOM'una yeniden eklerseniz yer paylaşımının onAdd()
yöntemini yeniden çağıracağını unutmayın.
Aşağıdaki örnekte, yer paylaşımının prototipine hide()
ve show()
yöntemleri eklenmiştir. Bu yöntemler, <div>
kapsayıcısının görünürlüğünü açar. Ayrıca, yer paylaşımını haritaya ekleyen veya haritadan çıkaran bir toggleDOM()
yöntemi ekliyoruz.
TypeScript
/** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map: google.maps.Map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } }
JavaScript
/** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } }
Düğme kontrolleri ekle
toggle
ve toggleDom
yöntemlerini tetiklemek için düğme kontrolleri haritaya eklenir.
TypeScript
const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);
JavaScript
const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);
Örnek kodu tamamlayın
Örnek kodun tamamını aşağıda görebilirsiniz:
TypeScript
// This example adds hide() and show() methods to a custom overlay's prototype. // These methods toggle the visibility of the container <div>. // overlay to or from the map. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 62.323907, lng: -150.109291 }, mapTypeId: "satellite", } ); const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608) ); // The photograph is courtesy of the U.S. Geological Survey. let image = "https://developers.google.com/maps/documentation/javascript/"; image += "examples/full/images/talkeetna.png"; /** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { private bounds: google.maps.LatLngBounds; private image: string; private div?: HTMLElement; constructor(bounds: google.maps.LatLngBounds, image: string) { super(); this.bounds = bounds; this.image = image; } /** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes()!; panes.overlayLayer.appendChild(this.div); } draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } } /** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { (this.div.parentNode as HTMLElement).removeChild(this.div); delete this.div; } } /** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map: google.maps.Map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } } } const overlay: USGSOverlay = new USGSOverlay(bounds, image); overlay.setMap(map); const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds hide() and show() methods to a custom overlay's prototype. // These methods toggle the visibility of the container <div>. // overlay to or from the map. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 62.323907, lng: -150.109291 }, mapTypeId: "satellite", }); const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608), ); // The photograph is courtesy of the U.S. Geological Survey. let image = "https://developers.google.com/maps/documentation/javascript/"; image += "examples/full/images/talkeetna.png"; /** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { bounds; image; div; constructor(bounds, image) { super(); this.bounds = bounds; this.image = image; } /** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes(); panes.overlayLayer.appendChild(this.div); } draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest(), ); const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast(), ); // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } } /** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { this.div.parentNode.removeChild(this.div); delete this.div; } } /** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } } } const overlay = new USGSOverlay(bounds, image); overlay.setMap(map); const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .custom-map-control-button { background-color: #fff; border: 0; border-radius: 2px; box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); margin: 10px; padding: 0 0.5em; font: 400 18px Roboto, Arial, sans-serif; overflow: hidden; height: 40px; cursor: pointer; } .custom-map-control-button:hover { background: rgb(235, 235, 235); }
HTML
<html> <head> <title>Showing/Hiding Overlays</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>