Dodawanie znacznika do mapy 3D
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę:
Android
iOS
JavaScript
Używaj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Na tej stronie znajdziesz informacje o tym, jak dodać znacznik do mapy programowo i za pomocą kodu HTML.
Dodawanie znacznika za pomocą kodu HTML
Aby dodać marker 3D za pomocą kodu HTML, dodaj element podrzędny gmp-marker-3d
do elementu gmp-map-3d
. Poniższy fragment kodu pokazuje, jak dodać markery do strony internetowej:
<gmp-map-3d
mode="hybrid"
center="48.861000,2.335861"
heading="110"
tilt="67.5"
range="1000"
style="height:400px"
>
<gmp-marker-3d
position="48.861000,2.335861">
</gmp-marker-3d>
</gmp-map-3d>
Dodawanie znacznika programowo
Aby dodać do mapy znacznik 3D za pomocą kodu, utwórz nowy obiekt Marker3DElement
, przekazując współrzędne lat/lng
i odwołanie do mapy bazowej, jak pokazano w tym przykładzie:
const marker = new Marker3DElement({
position: {lat: 47.6093, lng: -122.3402}, // (Required) Marker must have a lat/lng.
altitudeMode : "ABSOLUTE", // (Optional) Treated as CLAMP_TO_GROUND if omitted.
extruded : true, // (Optional) Draws line from ground to the bottom of the marker.
label : "Basic Marker" // (Optional) Add a label to the marker.
});
map.append(marker); // The marker must be appended to the map.
Dalsze kroki
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-22 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-22 UTC."],[],[],null,["Select platform: [Android](/maps/documentation/maps-3d/android-sdk/add-a-marker \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/add-a-marker \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/marker-add \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nUse markers to display single locations on a map. This page shows how to add a\nmarker to a map programmatically, and by using HTML.\n\n\nAdd a marker using HTML\n\nTo add a 3D marker using HTML, add a `gmp-marker-3d` child element to the\n`gmp-map-3d` element. The following snippet shows adding markers to a web page: \n\n \u003cgmp-map-3d\n mode=\"hybrid\"\n center=\"48.861000,2.335861\"\n heading=\"110\"\n tilt=\"67.5\"\n range=\"1000\"\n style=\"height:400px\"\n \u003e\n \u003cgmp-marker-3d\n position=\"48.861000,2.335861\"\u003e\n \u003c/gmp-marker-3d\u003e\n \u003c/gmp-map-3d\u003e\n\nAdd a marker programmatically\n\nTo add a 3D marker to a map programmatically, create a new `Marker3DElement`,\npassing `lat/lng` coordinates and a reference to the basemap, as shown in this\nexample: \n\n const marker = new Marker3DElement({\n position: {lat: 47.6093, lng: -122.3402}, // (Required) Marker must have a lat/lng.\n altitudeMode : \"ABSOLUTE\", // (Optional) Treated as CLAMP_TO_GROUND if omitted.\n extruded : true, // (Optional) Draws line from ground to the bottom of the marker.\n label : \"Basic Marker\" // (Optional) Add a label to the marker.\n });\n\n map.append(marker); // The marker must be appended to the map.\n\nNext steps\n\n- [Basic marker customization](/maps/documentation/javascript/3d/marker-customization)"]]