- Omówienie
- Korzystanie z biblioteki
- Opcje RysunksManager
- Aktualizowanie elementów sterujących narzędzi do rysowania
- Wydarzenia związane z rysowaniem
Opis
Klasa DrawingManager
udostępnia interfejs graficzny, za pomocą którego użytkownicy mogą rysować na mapie wielokąty, prostokąty, linie łamane, okręgi i znaczniki.
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 znajdujących się w tej bibliotece, musisz ją najpierw wczytać za pomocą parametru libraries
w adresie URL wczytywania 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 Library możesz utworzyć obiekt DrawingManager
w ten sposób:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
Opcje menedżera Rysunków
Konstruktor DrawingManager
wykorzystuje zestaw opcji, które określają zestaw elementów sterujących do wyświetlenia, pozycję elementu sterującego i początkowy stan rysowania.
- Właściwość
drawingMode
obiektuDrawingManager
określa początkowy stan rysowania w Rysunkach Manager. Akceptuje stałągoogle.maps.drawing.OverlayType
. Wartość domyślna tonull
. W takim przypadku po zainicjowaniu obiektu Rysunk Manager kursor jest w trybie innym niż rysunkowy. - Właściwość
drawingControl
obiektuDrawingManager
określa widoczność interfejsu wyboru narzędzi do rysowania na mapie. Akceptuje wartość logiczną. - Za pomocą właściwości
drawingControlOptions
elementuDrawingManager
możesz też określić jego pozycję oraz typy nakładek, które powinny być w niej reprezentowane.position
określa położenie elementu sterującego rysunkiem na mapie i akceptuje stałągoogle.maps.ControlPosition
.drawingModes
to tablica stałychgoogle.maps.drawing.OverlayType
i określa typy nakładek, które mają być uwzględniane w selektorze kształtów sterujących rysowania. Ikona ręki będzie widoczna przez cały czas, co pozwoli użytkownikowi na interakcję z mapą bez konieczności rysowania. Kolejność narzędzi w kontrolce będzie zgodna z kolejnością, w której zostały zadeklarowane w tablicy.
- Każdy typ nakładki może mieć przypisany zestaw domyślnych właściwości, które określają wygląd nakładki po pierwszym utworzeniu. Są one definiowane we właściwości
{overlay}Options
nakładki (gdzie{overlay}
reprezentuje jej typ). Na przykład właściwości wypełnienia kręgu, właściwości linii, zIndex i klikalność można zdefiniować za pomocą właściwościcircleOptions
. Wszystkie wartości rozmiaru, lokalizacji lub mapy są pomijane. Więcej informacji o tym, które właściwości można ustawiać, znajdziesz w dokumentacji interfejsu API.
Uwaga: aby po utworzeniu kształtu umożliwić jego edytowanie przez użytkownika, ustaw 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;
Wypróbuj fragment
Aktualizowanie elementów sterujących 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ć opcje narzędzi do rysowania:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
Aby usunąć element sterujący narzędzi do rysowania z obiektu map
:
drawingManager.setMap(null);
Ukrycie elementu sterującego rysowaniem powoduje, że elementy sterujące narzędzi do rysowania nie są wyświetlane, ale wszystkie funkcje klasy DrawingManager
są nadal dostępne.
Dzięki temu w razie potrzeby możesz wdrożyć własny element sterujący. Usunięcie obiektu DrawingManager
z obiektu map
spowoduje wyłączenie wszystkich funkcji rysowania. Aby przywrócić funkcje rysowania, należy ponownie dołączyć go do mapy za pomocą drawingManager.setMap(map)
lub utworzonego nowego obiektu DrawingManager
.
Wydarzenia związane z rysowaniem
Po utworzeniu nakładki kształtu uruchamiane są dwa zdarzenia:
- Zdarzenie
{overlay}complete
(gdzie{overlay}
reprezentuje typ nakładki, np.circlecomplete
,polygoncomplete
itp.). Odniesienie do nakładki jest przekazywane jako argument. - Wydarzenie
overlaycomplete
. Literał obiektu zawierającyOverlayType
i odwołanie 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.