- Przegląd
- Korzystanie z Biblioteki
- Opcje Rysowania
- Aktualizowanie kontroli narzędzi do rysowania
- Rysowanie wydarzeń
Omówienie
Klasa DrawingManager
oferuje graficzny interfejs użytkownika do rysowania wielokątów, prostokątów, linii łamanych, okręgów i znaczników.
Korzystanie z biblioteki
Narzędzia do rysowania to samodzielna biblioteka niezależna od głównego kodu JavaScript interfejsu API Map Google. Aby korzystać z funkcji tej biblioteki, musisz najpierw wczytać go za pomocą parametru libraries
w adresie URL rozruchowego interfejsu API Map Google:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>
Po dodaniu parametru bibliotek możesz utworzyć obiekt DrawingManager
w ten sposób:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
Opcje Rysunku
Konstruktor DrawingManager
przyjmuje zestaw opcji definiujących zestaw elementów sterujących do wyświetlenia, położenie elementu sterującego oraz początkowy stan rysowania.
- Właściwość
drawingMode
elementuDrawingManager
określa początkowy stan rysowania obiektu Rysowanie. Akceptuje stałągoogle.maps.drawing.OverlayType
. Domyślna wartość tonull
. W takim przypadku kursor jest w trybie innym niż rysowanie, gdy inicjowana jest funkcja Rysowanie. - Właściwość
drawingControl
elementuDrawingManager
definiuje widoczność interfejsu wyboru narzędzi do rysowania na mapie. Może mieć wartość logiczną. - Za pomocą właściwości
drawingControlOptions
elementuDrawingManager
możesz też określić położenie elementu sterującego oraz typy nakładek, które powinny być widoczne w ustawieniu kontrolnym.position
określa położenie elementu sterującego na mapie i akceptuje stałągoogle.maps.ControlPosition
.drawingModes
to tablica stałych wartościgoogle.maps.drawing.OverlayType
, która określa typy nakładek, które mają zostać uwzględnione w selektorze kształtu kształtu. Pojawia się zawsze ikona dłoni, która umożliwia użytkownikom interakcję z mapą bez konieczności rysowania. Kolejność narzędzi w kontrolce odpowiada kolejności, w której są one zadeklarowane w tablicy.
- Do każdego typu nakładki można przypisać zestaw właściwości domyślnych, które określają jej wygląd po utworzeniu. Są one zdefiniowane we właściwości
{overlay}Options
nakładki (gdzie{overlay}
reprezentuje typ nakładki). Na przykład właściwości wypełnienia, właściwości kreski, zIndex i klikalności okręgu można zdefiniować za pomocą właściwościcircleOptions
. Przekazywanie jakichkolwiek wartości dotyczących rozmiaru, lokalizacji lub mapy jest ignorowane. Szczegółowe informacje o tym, które właściwości można ustawić, znajdziesz w dokumentacji referencyjnej interfejsu API.
Uwaga: aby po utworzeniu kształtu user- edytować, ustawić jego 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;
Fragment
Aktualizowanie opcji narzędzi do rysowania
Po utworzeniu obiektu DrawingManager
możesz go zaktualizować, wywołując setOptions()
i przekazując nowe wartości.
drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, drawingModes: ['marker'] } });
Aby ukryć lub wyświetlić elementy sterujące narzędziami do rysowania:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
Aby usunąć element sterujący narzędzia do obiektu map
:
drawingManager.setMap(null);
Ukrycie elementu sterującego rysunku uniemożliwia wyświetlanie opcji narzędzi do rysowania, ale wszystkie funkcje klasy DrawingManager
są nadal dostępne.
Dzięki temu w razie potrzeby możesz wdrożyć własną kontrolę. Usunięcie obiektu DrawingManager
z obiektu map
spowoduje wyłączenie wszystkich funkcji rysowania. Aby przywrócić funkcje rysowania, należy ponownie dołączyć do mapy obiekt drawingManager.setMap(map)
lub utworzyć nowy obiekt DrawingManager
.
Wydarzenia związane z rysowaniem
Podczas tworzenia nakładki kształtu wywoływane są 2 zdarzenia:
- Zdarzenie
{overlay}complete
(gdzie{overlay}
oznacza typ nakładki, np.circlecomplete
,polygoncomplete
). Odwołanie do nakładki jest przekazywane jako argument. - Zdarzenie
overlaycomplete
. Literał obiektu zawierającyOverlayType
i odniesienie do nakładki jest przekazywany jako argument.
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 podczas rysowania na mapie zdarzenia google.maps.Map
, takie jak click
i mousemove
, są wyłączone.