Sie können der Karte Objekte hinzufügen, um Punkte, Linien, Bereiche oder Gruppen von Objekten zu kennzeichnen. In der Maps JavaScript API werden diese Objekte als Overlays bezeichnet. Overlays sind an Breiten- und Längengrad gebunden, sodass sie sich beim Ziehen und Zoomen der Karte mitbewegen.
Overlay-Typen
Die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ unterstützt mehrere Arten von Overlays, die Sie programmatisch hinzufügen können:
- Linien werden auf der Karte mithilfe von Polylinien dargestellt, die Punkte in einer geordneten Reihenfolge durch Liniensegmente miteinander verbinden.
- Bereiche mit willkürlicher Form werden auf der Karte mithilfe von Polygonen angezeigt. Wie Polylinien verbinden Polygone Orte in einer geordneten Reihenfolge miteinander, definieren dabei aber einen Bereich, den sie umschließen.
Polylinien
Mithilfe von Polylinien werden Linien auf einer Karte basierend auf einer geordneten Reihenfolge von Orten dargestellt.
Polylinien hinzufügen
<gmp-map-3d mode="hybrid" 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>
const polyline = document.querySelector('gmp-polyline-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
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 }
];
}
init();
</script>
<script>
(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: "<YOUR_API_KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
Polylinien entfernen
const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();
Verdeckte Polylinie
Sie können die Sichtbarkeit der verdeckten Segmente mit dem draws-occluded-segments-Attribut anpassen.
<gmp-map-3d mode="hybrid" heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
<gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="rgba(25, 102, 210, 0.75)" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>
<script>
const polyline = document.querySelector('gmp-polyline-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
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}
];
}
init();
</script>
<script>
(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: "<YOUR_API_KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
Polygone
Polygone werden verwendet, um Bereiche mit willkürlicher Form auf der Karte darzustellen. Wie Polylinien verbinden Polygone Orte in einer geordneten Reihenfolge miteinander, definieren dabei aber den Bereich, den sie umschließen.
Einfaches Polygon
<gmp-map-3d mode="hybrid" center="40.6842,-74.0019,1000" heading="340" tilt="70">
<gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="rgba(25, 102, 210, 0.75)" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
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}
];
}
init();
</script>
<script>
(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: "<YOUR_API_KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
Polygone entfernen
const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();
Extrudiertes Polygon
<gmp-map-3d mode="hybrid" 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>
const polygon = document.querySelector('gmp-polygon-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
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}
];
}
init();
</script>
<script>
(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: "<YOUR_API_KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
Polygon mit einem inneren Loch
<gmp-map-3d mode="hybrid" 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>
const polygon = document.querySelector('gmp-polygon-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
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}
]
];
}
init();
</script>
<script>
(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: "<YOUR_API_KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>