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

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

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

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

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

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

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

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

خط متعدد الأضلاع أحمر مرسوم على سطح الأرض

<gmp-map-3d 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 async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    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 }
    ];
  });
</script>

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

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

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

يمكنك التحكّم في مستوى ظهور الشرائح المُحجوبة باستخدام السمة draws-occluded-segments.

رسم مسار عشوائي عبر وسط مدينة سان فرانسيسكو باستخدام خط متعدد الأضلاع مُحجوب

<gmp-map-3d 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 async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    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}
    ];
  });
</script>

عرض نموذج

المضلّعات

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

مضلّع بسيط

مضلع أحمر مثلث الشكل مع حواف زرقاء حول مانهاتن السفلى

<gmp-map-3d 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 async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    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}
    ];
  });
</script>

إزالة مضلّع

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

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

منشور أحمر مثلث مع حواف زرقاء حول مانهاتن السفلى على ارتفاع 1,000 متر

<gmp-map-3d 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 async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    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}
    ];
  });
</script>

عرض نموذج

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

مضلع أحمر مثلث مع فتحة في المنتصف وحواف زرقاء حول منطقة مانهاتن السفلى

<gmp-map-3d 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 async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    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}
      ]
    ];
  });
</script>