- Genel Bakış
- Kitaplık'ı kullanma
- DrawingManager Seçenekleri
- Çizim Araçları Denetimini Güncelleme
- Çizim Etkinlikleri
Genel bakış
DrawingManager
sınıfı kullanıcılara harita üzerinde poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizmek için kullanabileceğiniz bir grafik arayüz sunar.
Kitaplığı Kullanma
Çizim Araçları, ana Maps API JavaScript kodundan ayrı, bağımsız bir kitaplıktır. Bu kitaplıkta bulunan işlevi kullanmak için önce Maps API önyükleme URL'sindeki libraries
parametresini kullanarak bunu yüklemeniz gerekir:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
collections parametresini ekledikten sonra aşağıdaki şekilde bir DrawingManager
nesnesi oluşturabilirsiniz:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
DrawingManager Seçenekleri
DrawingManager
oluşturucu, görüntülenecek denetim grubunu, kontrolün konumunu ve ilk çizim durumunu tanımlayan bir dizi seçenek alır.
DrawingManager
öğesinindrawingMode
özelliği, DrawingManager'ın ilk çizim durumunu tanımlar.google.maps.drawing.OverlayType
sabit değerini kabul eder. Varsayılan değernull
'dir. Bu durumda, DrawingManager başlatılırken imleç çizim dışı modda olur.DrawingManager
öğesinindrawingControl
özelliği, çizim araçları seçim arayüzünün harita üzerinde görünürlüğünü tanımlar. Boole değeri kabul eder.- Ayrıca
DrawingManager
öğesinindrawingControlOptions
özelliğini kullanarak kontrolün konumunu ve kontrolde temsil edilmesi gereken yer paylaşımı türlerini tanımlayabilirsiniz.position
, çizim denetiminin harita üzerindeki konumunu tanımlar vegoogle.maps.ControlPosition
sabitini kabul eder.drawingModes
, birgoogle.maps.drawing.OverlayType
sabit değeri dizisidir ve çizim kontrol şekli seçiciye dahil edilecek yer paylaşımı türlerini tanımlar. El simgesi her zaman mevcut olduğundan, kullanıcının çizim yapmadan haritayla etkileşimde bulunabilmesini sağlar. Kontroldeki araçların sırası, dizide bildirildikleri sırayla eşleşir.
- Her bir bindirme türüne, ilk oluşturulduğunda yer paylaşımının görünümünü tanımlayan bir dizi varsayılan özellik atanabilir. Bunlar, yer paylaşımının
{overlay}Options
özelliğinde tanımlanır (burada{overlay}
, yer paylaşımı türünü temsil eder). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, zIndex ve tıklanabilirlik,circleOptions
özelliğiyle tanımlanabilir. Herhangi bir boyut, konum veya harita değeri aktarılırsa bunlar yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referansı belgelerini inceleyin.
Not: Bir şekli oluşturulduktan sonra kullanıcı tarafından düzenlenebilir hale getirmek için editable
özelliğini true
olarak ayarlayın.
TypeScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, } ); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } window.initMap = initMap;
Örneği Deneyin
Çizim Araçları Denetimini Güncelleme
DrawingManager
nesnesi oluşturulduktan sonra setOptions()
yöntemini çağırıp yeni değerler ileterek bu nesneyi güncelleyebilirsiniz.
drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, drawingModes: ['marker'] } });
Çizim araçları denetimini gizlemek veya göstermek için:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
Çizim araçları denetimini map
nesnesinden kaldırmak için:
drawingManager.setMap(null);
Çizim denetimini gizlemek, çizim araçları denetiminin görüntülenmemesine neden olur, ancak DrawingManager
sınıfının tüm işlevleri kullanılabilir durumda kalır.
Bu şekilde isterseniz kendi denetiminizi uygulayabilirsiniz. DrawingManager
öğesinin map
nesnesinden kaldırılması
tüm çizim işlevlerini devre dışı bırakır.
Çizim özellikleri geri yüklenecekse drawingManager.setMap(map)
ile haritaya yeniden eklenmesi veya yeni bir DrawingManager
nesnesi oluşturulması gerekir.
Çizim Etkinlikleri
Bir şekil yer paylaşımı oluşturulduğunda iki etkinlik tetiklenir:
- Bir
{overlay}complete
etkinliği (burada{overlay}
, yer paylaşımı türünü temsil eder (ör.circlecomplete
,polygoncomplete
vb.). Yer paylaşımına yapılan bir başvuru bağımsız değişken olarak iletilir. overlaycomplete
etkinliği.OverlayType
öğesini ve yer paylaşımına bir referansı içeren bir nesne değişmez değeri bağımsız değişken olarak iletilir.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) { var radius = circle.getRadius(); }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == 'circle') { var radius = event.overlay.getRadius(); } });
Haritada çizim yaparken click
ve mousemove
gibi google.maps.Map
etkinliklerinin devre dışı bırakıldığını unutmayın.