Disegna sulla mappa

Questo prodotto o questa funzionalità è sperimentale (pre-release). I prodotti e le funzionalità pre-GA potrebbero avere supporto limitato e le modifiche ai prodotti e alle funzionalità pre-GA potrebbero non essere compatibili con altre versioni pre-GA. Le offerte pre-GA sono coperte dai Termini specifici di servizio di Google Maps Platform. Per ulteriori informazioni, consulta le descrizioni della fase di lancio.

Puoi aggiungere oggetti alla mappa per designare punti, linee, aree o raccolte di oggetti. L'API Maps JavaScript chiama questi oggetti overlay. Gli overlay sono legati alle coordinate di latitudine/longitudine, quindi si spostano quando trascini la mappa o ne aumenti lo zoom.

Tipi di overlay

Le mappe 3D fotorealistiche nell'API Maps JavaScript supportano diversi tipi di overlay che puoi aggiungere tramite programmazione:

• Le linee sulla mappa vengono visualizzate utilizzando polilinee, rappresentate come una sequenza ordinata di punti collegati da segmenti di linea.
• Le aree di forma arbitraria sulla mappa vengono visualizzate utilizzando i poligoni. Come le polilinee, i poligoni sono una sequenza ordinata di località. A differenza delle polilinee, i poligoni definiscono una regione che racchiudono.

Polilinee

Le polilinee vengono utilizzate per visualizzare linee sulla mappa in base a una sequenza ordinata di località.

Aggiungere una polilinea

<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>

Rimuovere una polilinea

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

Polilinea ostruita

Puoi controllare la visibilità dei segmenti omessi utilizzando l'attributo draws-occluded-segments.

<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>

Visualizza esempio

Poligoni

I poligoni vengono utilizzati per visualizzare aree con una forma sulla mappa. Come le polilinee, i poligoni sono una sequenza ordinata di località. Tuttavia, i poligoni definiscono la regione che contengono.

Poligono semplice

<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>

Rimuovere un poligono

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

Poligono estruso

<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>

Visualizza esempio

Poligono con un foro interno

<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>