- Genel Bakış
- Kitaplık'ı kullanma
- DrawingManager Seçenekleri
- Çizim Araçları Denetimi'ni güncelleme
- Çizim Etkinlikleri
Genel Bakış
DrawingManager
sınıfı, kullanıcıların çizim yapması için bir grafik arayüz sağlar
poligonlar, dikdörtgenler, çoklu çizgiler, daireler ve işaretçiler görebilirsiniz.
Kitaplığı kullanma
Çizim Araçları, ana Haritalar uygulamasından ayrı, bağımsız bir kitaplıktır
API JavaScript kodu. Bu kitaplıkta bulunan işlevleri kullanmak için,
önce libraries
parametresini kullanarak yüklemeniz gerekir:
Haritalar API'si önyükleme URL'si:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
Kitaplık parametresini ekledikten sonra DrawingManager
oluşturabilirsiniz
nesnesini tanımlayın:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
DrawingManager Seçenekleri
DrawingManager
oluşturucusu,
kontrol düğmelerinin konumunu ve ilk çizimi gösteren
durumu.
DrawingManager
öğesinindrawingMode
özelliği, DrawingManager'ın çizim durumu. Şunları kabul eder:google.maps.drawing.OverlayType
sabittir. Varsayılan değernull
. Bu durumda imleç, çizim olmayan bir konumdadır. ilk kullanıma hazır hale getirildiğinden emin olursunuz.DrawingManager
öğesinindrawingControl
özelliği Çizim araçları seçim arayüzünün harita üzerinde görünürlüğü. Şunları kabul eder: boole değeri.- Ayrıca kontrolün konumunu ve kontrolün türlerini
kodu kullanılarak kontrolde temsil edilmesi gereken yer paylaşımları
DrawingManager
öğesinindrawingControlOptions
özelliği.position
, çizim kontrolünün harita üzerindeki konumunu tanımlar vegoogle.maps.ControlPosition
kabul edilir sabittir.drawingModes
,google.maps.drawing.OverlayType
sabitleri ve çizim kontrol şekline dahil edilecek bindirme türlerini tanımlar kullanabilirsiniz. El simgesi her zaman mevcut olduğundan kullanıcının haritayla çizim yapmadan etkileşim kurabilirsiniz. Araçların sıralamadaki kontrolü, dizide bildirildikleri sırayla eşleşir.
- Her yer paylaşımı türüne bir dizi varsayılan özellik atanabilir.
ilk oluşturulduğunda bindirmenin görünümünü tanımlar. Bunlar,
söz konusu yer paylaşımının
{overlay}Options
özelliğinde (burada{overlay}
, yer paylaşımlı türü). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, z Endeksi ve tıklanabilirlik,circleOptions
ile tanımlanabilir. Herhangi bir boyut, konum veya harita değeri iletilirse bunlar yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referans belgeleri.
Not: Bir şekli sonradan kullanıcı tarafından düzenlenebilir hale getirmek için
oluşturuldu, 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ı Denetimi güncelleniyor
DrawingManager
nesnesi oluşturulduktan sonra nesneyi şu şekilde güncelleyebilirsiniz:
setOptions()
işlevini çağırma ve yeni değerleri iletme.
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 kontrolünü gizlemek, çizim araçları denetiminin gösterilmemesine neden olur.
ancak DrawingManager
sınıfının tüm işlevleri hâlâ kullanılabilir durumdadır.
Bu şekilde, isterseniz kendi denetiminizi uygulayabilirsiniz. Kaldırmak
map
nesnesindeki DrawingManager
tüm çizim işlevlerini devre dışı bırakır; o
haritaya drawingManager.setMap(map)
veya yeni bir
Çizim özellikleri geri yüklenecekse DrawingManager
nesne oluşturuldu.
Çizim Etkinlikleri
Bir şekil yer paylaşımı oluşturulduğunda iki etkinlik tetiklenir:
- Bir
{overlay}complete
etkinliği (burada{overlay}
temsil edilir)circlecomplete
,polygoncomplete
vb. gibi yer paylaşımı türü). CEVAP yer paylaşımına başvuru, bağımsız değişken olarak iletilir. overlaycomplete
etkinliği. Şunları içeren bir nesne değişmez değeri:OverlayType
ve yer paylaşımına bir başvuru 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(); } });
google.maps.Map
Haritada çizim yapılırken click
ve mousemove
gibi etkinlikler devre dışı bırakılır.