- Omówienie
- Korzystanie z biblioteki
- Opcje menedżera Rysunków
- Aktualizowanie ustawienia Narzędzia do rysowania
- Zdarzenia rysowania
Omówienie
Klasa DrawingManager
udostępnia graficzny interfejs do rysowania.
wielokąty, prostokąty, linie łamane, okręgi i znaczniki na mapie.
Korzystanie z Biblioteki
Narzędzia do rysowania to niezależna biblioteka niezależna od głównych Map Google
Kod JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece,
musisz go najpierw wczytać za pomocą parametru libraries
w sekcji
Adres URL wczytywania interfejsu API Map Google:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
Po dodaniu parametru Library możesz utworzyć DrawingManager
.
w następujący sposób:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
Opcje narzędzia GraphicManager
Konstruktor DrawingManager
przyjmuje zestaw opcji, które definiują zbiór
elementy sterujące do wyświetlenia, położenie elementu sterującego i początkowy rysunek
stanu.
- Właściwość
drawingMode
właściwościDrawingManager
określa wartość początkową w Menedżerze Rysunków. Akceptuje onagoogle.maps.drawing.OverlayType
jest stała. Domyślna wartość tonull
. W tym przypadku kursor jest w obszarze nierysunkowym. po zainicjowaniu menedżera Rysunków. - Właściwość
drawingControl
elementuDrawingManager
określa widoczność interfejsu wyboru narzędzi do rysowania na mapie. Akceptuje ona wartość logiczna. - Możesz również określić położenie elementu sterującego oraz typy elementów
nakładki, które powinny być reprezentowane w elemencie kontrolnym, korzystając z funkcji
Właściwość
drawingControlOptions
elementuDrawingManager
.position
określa położenie elementu sterującego rysowaniem na mapie oraz akceptujegoogle.maps.ControlPosition
jest stała.drawingModes
to tablica obejmująca stałychgoogle.maps.drawing.OverlayType
oraz określa typy nakładek, które mają zostać uwzględnione w kształcie kontrolnym rysowania . Ikona dłoni jest zawsze widoczna, dzięki czemu użytkownik może: i interakcji z mapą bez rysowania. Kolejność narzędzi w tabeli element sterujący będzie dopasowany do kolejności, w jakiej są zadeklarowane w tablicy.
- Każdemu typowi nakładki możesz przypisać zestaw właściwości domyślnych,
określić wygląd nakładki podczas jej tworzenia. Są one zdefiniowane
we właściwości
{overlay}Options
tej nakładki (gdzie{overlay}
reprezentuje (typ nakładki). Na przykład właściwości wypełnienia okręgu, kreska właściwości, zIndex i klikalność można zdefiniować za pomocącircleOptions
usłudze. Wszystkie wartości dotyczące rozmiaru, lokalizacji lub mapy są ignorowane. Szczegółowe informacje o tym, które właściwości można ustawić, znajdziesz w Dokumentacja API
Uwaga: aby kształtem można było edytować, gdy został już
ustaw właściwość editable
na true
.
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;
Zobacz próbkę
Aktualizowanie ustawienia narzędzi do rysowania
Po utworzeniu obiektu DrawingManager
możesz go zaktualizować przez
wywołując metodę setOptions()
i przekazując nowe wartości.
drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, drawingModes: ['marker'] } });
Aby ukryć lub wyświetlić element sterujący narzędziami do rysowania:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
Aby usunąć element sterujący narzędziami do rysowania z obiektu map
:
drawingManager.setMap(null);
Ukrycie elementu sterującego rysowaniem powoduje, że nie są one wyświetlane.
ale wszystkie funkcje klasy DrawingManager
są nadal dostępne.
Dzięki temu możesz w razie potrzeby wdrożyć własne elementy sterujące. Usunięcie
DrawingManager
z obiektu map
wyłącza wszystkie funkcje rysowania. jego
należy ponownie dołączyć do mapy wraz z elementem drawingManager.setMap(map)
lub nowym
Liczba utworzonych obiektów: DrawingManager
, jeśli mają zostać przywrócone obiekty rysunku.
Zdarzenia rysowania
Przy tworzeniu nakładki kształtu wywoływane są dwa zdarzenia:
- Zdarzenie
{overlay}complete
(gdzie{overlay}
reprezentuje typ nakładki, np.circlecomplete
,polygoncomplete
itp.). O odwołanie do nakładki jest przekazywane jako argument. - Zdarzenie
overlaycomplete
. Literał obiektu, zawierający Jako argument jest przekazywanyOverlayType
oraz odwołanie do nakładki.
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(); } });
Pamiętaj, że google.maps.Map
zdarzenia, takie jak click
i mousemove
, są wyłączone podczas rysowania na mapie.