Formas y líneas

Selecciona la plataforma: Android iOS

Puedes agregar varias formas a tu mapa. Una forma es un objeto del mapa que está asociado a un sistema de coordenadas LatLng. Los mapas en 3D incluidos en la API de Maps JavaScript admiten la adición de líneas y polígonos al mapa.

Polilíneas

Para dibujar una línea en tu mapa, usa una polilínea. La clase Polyline3DElement define una superposición lineal de segmentos de líneas conectados en el mapa. Un objeto Polyline3DElement consta de un array de ubicaciones LatLng y crea una serie de segmentos de líneas que conectan esas ubicaciones en una secuencia ordenada.

Cómo agregar una polilínea

El constructor Polyline3DElement toma un conjunto de Polyline3DElementOptions que especifica las coordenadas LatLng de la línea y un conjunto de opciones de diseño para ajustar el comportamiento visual de la polilínea.

Los objetos de polilínea se dibujan como una serie de segmentos rectos en el mapa. Al crear tu línea, puedes especificar colores personalizados, anchos, opacidades, alturas y opciones de diseño geométricas para el trazo en Polyline3DElementOptions, o puedes cambiar estas propiedades después de la construcción. Una polilínea admite las siguientes opciones de diseño para el trazo:

• outerColor: Un color HTML hexadecimal con el formato "#FFFFFF".
• outerWidth: Un valor numérico entre 0.0 y 1.0, que se interpreta como un porcentaje de strokeWidth.
• strokeColor: Un color HTML hexadecimal con el formato "#FFFFFF".
• strokeWidth: El ancho de la línea en píxeles.
• geodesic: Indica si los bordes del polígono siguen la curvatura de la Tierra o se dibujan como líneas rectas.
• altitudeMode: Indica cómo se interpretan los componentes de altitud en las coordenadas.
• drawsOccludedSegments: Un valor booleano que indica si se deben dibujar las partes del polígono que están ocultas por objetos (como edificios).
• extruded: Un valor booleano que indica si la polilínea debe conectarse al suelo.

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();
index.js

Polilíneas interactivas

En el siguiente ejemplo, se alterna la propiedad drawsOccludedSegments de la polilínea después de registrar un evento de clic.

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();
index.js

Polígonos

Un polígono representa un área delimitada por un trazado cerrado (o bucle), que se define a través de una serie de coordenadas. Polygon3DElement objetos son similares a los objetos Polyline3DElement, ya que constan de una serie de coordenadas en una secuencia ordenada. Los polígonos se dibujan con un trazo y un relleno. Puedes definir colores y anchos personalizados para el contorno del polígono (el trazo), y también opacidades y colores personalizados para el área delimitada (el relleno). Los colores deben indicarse en formato HTML hexadecimal. No se admiten nombres de colores.

Los objetos Polygon3DElement pueden describir formas complejas, incluidas las siguientes:

• Múltiples áreas no contiguas definidas por un solo polígono
• Áreas con agujeros
• Intersecciones de una o más áreas

Para definir una forma compleja, debes usar un polígono con varios trazados.

Cómo agregar un polígono

Dado que un área poligonal puede incluir varios trazados separados, la propiedad paths del objeto Polygon3DElement especifica un array de arrays. Cada array define una secuencia separada de coordenadas LatLng ordenadas.

En el caso de los polígonos básicos que constan de un solo trazado, puedes construir un Polygon3DElement con un único array de coordenadas LatLng. Los mapas en 3D incluidos en la API de Maps JavaScript convertirán el array en un array de arrays después de la construcción, cuando se almacene en la propiedad path.

async function init() {
    const { Map3DElement, Polygon3DElement } =
        await google.maps.importLibrary('maps3d');

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();
index.js

Polígonos interactivos

En el siguiente ejemplo, se cambian los colores interior y exterior del polígono después de registrar un evento de clic.

async function init() {
    const { Map3DElement, Polygon3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();
index.js