Rysuj na mapie

Możesz dodawać obiekty do mapy, aby wyznaczać punkty, linie, obszary lub zbiory obiektów. Interfejs Maps JavaScript API wywołuje te nakładki. Obrazy nad powierzchnią są powiązane ze współrzędnymi szerokości i długości geograficznej, więc przesuwają się podczas przeciągania lub powiększania mapy.

Typy nakładania

Interfejs API fotorealistyczny 3D w Maps JavaScript API obsługuje kilka różnych typów nakładek, które można dodawać automatycznie:

  • Linie na mapie są wyświetlane jako linie łamane, reprezentowane przez uporządkowaną sekwencję punktów połączonych odcinkami linii.
  • Obszary o dowolnych kształtach na mapie są wyświetlane za pomocą wielokątów. Podobnie jak linie łamane, wielokąty to uporządkowana sekwencja lokalizacji. W przeciwieństwie do linii łamanych wielokąty definiują region, który obejmują.

Linie łamane

Linie łamane są używane do wyświetlania linii na mapie na podstawie uporządkowanej sekwencji lokalizacji.

Dodawanie linii łamanej

Czerwona linia łamana na powierzchni Ziemi

<gmp-map-3d center="0,-180,15000000">
  <gmp-polyline-3d altitude-mode="clamp-to-ground" stroke-color="red" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.coordinates = [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ];
  });
</script>

Usuwanie linii łamanej

const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();

Wykluczona linia łamana

Widoczność wykluczonych segmentów możesz kontrolować za pomocą atrybutu draws-occluded-segments.

Zamknięta linia łamana rysująca dowolną trasę przez centrum San Francisco

<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
  <gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];
  });
</script>

Zobacz przykład

Wielokąty

Wielokąty służą do wyświetlania obszarów kształtu na mapie. Podobnie jak linie łamane, wielokąty to ułożone sekwencje lokalizacji. Jednak poliony określają region, który obejmują.

Prosty wielokąt

Trójkątny czerwony wielokąt z niebieskimi krawędziami wokół dolnej części Manhattanu

<gmp-map-3d center="40.6842,-74.0019,1000" heading="340" tilt="70">
  <gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="#0000ff" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208},
      {lat: 40.6993, lng: -74.019},
      {lat: 40.7035, lng: -74.0004},
      {lat: 40.7144, lng: -74.0208}
    ];
  });
</script>

Usuwanie wielokąta

const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();

Wyciągnięty wielokąt

Trójkątny czerwony pryzmat z niebieskimi krawędziami wokół dolnego Manhattanu, na wysokości 1000 m

<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
  });
</script>

Zobacz przykład

Wielokąt z wewnętrznym otworem

Trójkątny czerwony wielokąt z otworem w środku i niebieskimi krawędziami wokół dolnego Manhattanu

<gmp-map-3d center="40.7093,-74.0122,10" heading="30" tilt="15" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
    polygon.innerCoordinates = [
      [
        {lat: 40.71, lng: -74.0175, altitude: 1000},
        {lat: 40.703, lng: -74.0165, altitude: 1000},
        {lat: 40.7035, lng: -74.006, altitude: 1000},
        {lat: 40.71, lng: -74.0175, altitude: 1000}
      ]
    ];
  });
</script>