Использование альфа -канала Google Maps API JavaScript. Только в целях развития. < /P>
Код: Выделить всё
Step 3 - Simple Marker
body {
height: 100vh;
margin: 0;
}
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
v: "alpha",
});
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 25.807096, lng: -80.361428, altitude: 30},
range: 200,
tilt: 70,
heading: 250,
mode: MapMode.SATELLITE,
});
const markers = [
{ lat: 25.807096, lng: -80.361428, altitude: 20, label: "Google UK" },
{ lat: 25.806642, lng: -80.363456, altitude: 20, label: "Statue of Liberty" },
{ lat: 25.805468, lng:-80.364287, altitude: 20, label: "Eiffel Tower" },
{ lat: 25.804730, lng: -80.364945, altitude: 20, label: "Los Angeles" }
];
markers.forEach(markerData => {
const marker = new Marker3DElement({
position: { lat: markerData.lat, lng: markerData.lng, altitude: markerData.altitude },
label: markerData.label,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
});
document.body.append(map3D);
}
init();
Подробнее здесь: https://stackoverflow.com/questions/795 ... pi-for-dev