- Anmelden
- Kontakt

Marker hinzufügen

Marker

Erstellt eine Markierungskomponente

                          Marker (Optionen: Betreff?, Legacy-Optionen: Optionen?)

Parameter

Optionen

Name	Typ (Standard)	Infos
options.element	HTML-Element	Als Marker zu verwendendes DOM-Element. Der Standardwert ist ein hellblauer, tropfenförmiger SVG-Marker.
Optionen.Anker	Saite (Mitte)	Ein String, der den Teil des Markers angibt, der am nächsten an der über Marker setLngLat gesetzten Koordinate positioniert werden soll. Die Optionen sind 'Mitte' , 'Oben' , 'Unten' , 'Links' , 'Rechts' , 'Oben-Links' , 'Oben-Rechts' , 'Unten-Links' und 'Unten-Rechts' .
Optionen.Offset	Array aus zwei Punkten in Pixel	Der Offset in Pixel als PointLike-Objekt, das relativ zur Mitte des Elements angewendet werden soll. Negative zeigen links und oben an.
Optionen.Farbe	Zeichenfolge (#3FB1CE)	Die Farbe, die für die Standardmarkierung verwendet werden soll, wenn options.element nicht bereitgestellt wird. Die Standardeinstellung ist hellblau.
Optionen.ziehbar	boolesch (falsch)	Ein boolescher Wert, der angibt, ob eine Markierung an eine neue Position auf der Karte gezogen werden kann oder nicht.
Optionen.Rotation	Nummer (0)	Der Rotationswinkel des Markers in Grad relativ zu seiner jeweiligen Marker rotationAlignment-Einstellung. Ein positiver Wert dreht den Marker im Uhrzeigersinn.
options.pitchAlignment	Zeichenfolge (automatisch)	Karte richtet den Marker an der Ebene der Karte aus. Ansichtsfenster richtet den Marker an der Ebene des Ansichtsfensters aus. auto entspricht automatisch dem Wert von rotationAlignment .
options.rotationAlignment	Zeichenfolge (automatisch)	map richtet die Drehung des Markers relativ zur Karte aus und behält eine Peilung bei, während sich die Karte dreht. Ansichtsfenster richtet die Drehung des Markers relativ zum Ansichtsfenster aus, unabhängig von Kartendrehungen. auto ist gleichbedeutend mit viewport .

                
        <html>
          <ganzer>
              <Ziel charset="utf-8" />
              <Titel>Erstellen Sie eine ziehbare Markierung</Titel>
              <Ziel Name="Ansichtsfenster" Inhalt="Anfangsmaßstab = 1, Maximalmaßstab = 1, Benutzerskalierbar = Nein" />
              <Skript src="https://maps.flightmap.io/flightmapjs"></Skript>
              <Link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="Stilvorlage" />
              <Stil>
                Körper { Marge: 0; Polsterung: 0;; }}
                #Karte { Position: absolut; Top: 0; Boden: 0; Breite: 100%; };
              </Stil>
          </ganzer>
          <Körper>
              <Stil>
                .Koordinaten {
                Hintergrund: rgba(0, 0, 0, 0.5);
                Farbe: #fff;
                Position: absolut;
                Boden: 40px;
                links: 10px;
                Polsterung: 5px 10px;
                Marge: 0;
                Schriftgröße: 11px;
                line-height: 18px;
                border-radius: 3px;
                Display: keiner; }
              </Stil>
              <div id="Karte"></div>
              <vor id="Koordinaten" Klasse="Koordinaten"></vor>
              <Skript>
                jung Koordinaten = Dokument.getElementById('Koordinaten');
                jung Karte =   Flugkarte.Map({
                  Container: 'Karte',
                  Stil: 'style-dark.json', //ID des gehosteten Stils
                  Center: [-77.38, 39],
                  Zoom: 2,
                  Zugangstoken: ' '
                });

                jung Markierung =   Flugkarte.Marker({
                  ziehbar: was immer dies auch sein sollte.
                }) .setLngLat([0, 0]) .addTo(Karte);

                Funktion onDragEnd() {
                  jung lngLat = marker.getLngLat(); koordiniert.style.display = 'Block'; koordiniert.innerHTML =
                    'Längengrad: ' + lngLat.lng + ' Breite: ' + lngLat.lat; } marker.on('drachen', onDragEnd);
              </Skript>
          </Körper>
        </html>