الرسم على الخريطة

هذا المنتج أو الميزة تجريبية (قبل طرحها للجميع). قد يكون الدعم المقدَّم للمنتجات والميزات في مرحلة ما قبل الإصدار العلني محدودًا، وقد لا تكون التغييرات التي يتم إجراؤها على المنتجات والميزات في مرحلة ما قبل الإصدار العلني متوافقة مع الإصدارات الأخرى من مرحلة ما قبل الإصدار العلني. تخضع "عروض مرحلة ما قبل الإطلاق" لالبنود الخاصة بخدمة "منصّة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مراحل الإطلاق.

يمكنك إضافة عناصر إلى الخريطة لتحديد نقاط أو خطوط أو مناطق أو مجموعات من العناصر. تُطلِق Maps JavaScript API على هذه الكائنات اسم "العناصر التي تظهر على سطح الخريطة". تكون التراكبات مرتبطة بإحداثيات خطوط العرض/الطول، لذا تتحرك عند سحب التضاريس أو تكبيرها أو تصغيرها.

أنواع الإعلانات التي تظهر على سطح الصفحة

تتيح واجهة برمجة التطبيقات Maps JavaScript API لميزة "الخرائط الثلاثية الأبعاد ذات المظهر الواقعي" استخدام عدة أنواع مختلفة من العناصر التي يمكنك إضافتها آليًا:

• يتم عرض الخطوط على الخريطة باستخدام الخطوط المتعددة، التي يتم تمثيلها على هيئة تسلسل منتظم من النقاط المتصلة بقطاعات الخطوط.
• يتم عرض المناطق ذات الشكل العشوائي على الخريطة باستخدام الأشكال المتعددة الأضلاع. مثل الخطوط المتعددة، المضلّعات هي تسلسل مُرتّب للمواقع الجغرافية. على عكس الخطوط المتعدّدة، تحدِّد المضلّعات منطقة تحدها.

الخطوط المتعددة

تُستخدَم الخطوط المتعددة لعرض خطوط على الخريطة استنادًا إلى تسلسل منتظم للمواقع الجغرافية.

إضافة خط متعدد

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

إزالة خط متعدد الأضلاع

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

خطوط متعدّدة مُحجوبة

يمكنك التحكّم في مستوى ظهور الشرائح المُحجوبة باستخدام السمة 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>

عرض نموذج

المضلّعات

تُستخدَم المضلّعات لعرض مناطق ذات شكل معيّن على الخريطة. مثل الخطوط المتعددة، المضلّعات هي تسلسل مُرتّب للمواقع الجغرافية. ومع ذلك، تحدِّد المضلّعات المنطقة التي تحيط بها.

مضلّع بسيط

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

إزالة مضلّع

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

مضلّع مُشكّل بالانبثاق

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

عرض نموذج

مضلّع به ثقب داخلي

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