الحصول على مفتاح Maps Demo Key: يمكنك تجربة ميزات محدّدة من Maps JavaScript API و"حزمة أدوات خرائط Google الجاهزة للأماكن" بدون أي تكلفة باستخدام مفتاح Maps Demo Key، وبدون الحاجة إلى إدخال معلومات الفوترة.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

طبقة البيانات

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

توفّر طبقة بيانات "خرائط Google" حاوية للبيانات الجغرافية المكانية العشوائية. يمكنك استخدام طبقة البيانات لتخزين بياناتك المخصّصة أو لعرض بيانات GeoJSON على خريطة Google.

نظرة عامة

شاهِد فيديو DevBytes هذا لمعرفة المزيد عن طبقة البيانات.

باستخدام Maps JavaScript API، يمكنك ترميز خريطة بمجموعة متنوعة من العناصر المركّبة، مثل العلامات والخطوط المتعددة والمضلّعات وما إلى ذلك. يجمع كل تعليق توضيحي من هذه التعليقات بين معلومات الأنماط وبيانات الموقع الجغرافي. الفئة google.maps.Data هي حاوية لبيانات جغرافية مكانية عشوائية. بدلاً من إضافة هذه الأشكال، يمكنك استخدام طبقة البيانات لإضافة بيانات جغرافية عشوائية إلى خريطتك. إذا كانت هذه البيانات تحتوي على أشكال هندسية، مثل النقاط أو الخطوط أو المضلّعات، ستعرضها واجهة برمجة التطبيقات تلقائيًا كعلامات وخطوط متعدّدة ومضلّعات. يمكنك تصميم هذه العناصر كما تفعل مع أي تراكب عادي، أو تطبيق قواعد التصميم استنادًا إلى السمات الأخرى المضمّنة في مجموعة البيانات.

تتيح لك فئة google.maps.Data إجراء ما يلي:

رسم مضلّعات على خريطتك
أضِف بيانات GeoJSON إلى خريطتك.
‫GeoJSON هو معيار للبيانات الجغرافية المكانية على الإنترنت. تتّبع فئة Data بنية GeoJSON في تمثيل البيانات وتسهّل عرض بيانات GeoJSON. استخدِم طريقة loadGeoJson() لاستيراد بيانات GeoJSON وعرض النقاط والسلاسل الخطية والمضلّعات بسهولة.
استخدِم google.maps.Data لإنشاء نماذج للبيانات العشوائية.
تحتوي معظم الكيانات في العالم الحقيقي على خصائص أخرى مرتبطة بها. على سبيل المثال، للمتاجر ساعات عمل، وللطرق سرعة حركة مرور، ولكل فرقة من فرق المرشدات منطقة لبيع البسكويت. باستخدام google.maps.Data، يمكنك وضع نماذج لهذه السمات وتنسيق بياناتك وفقًا لذلك.
اختَر طريقة تمثيل بياناتك وغيِّر رأيك في أي وقت.
تتيح لك طبقة البيانات اتخاذ قرارات بشأن عرض بياناتك والتفاعل معها. على سبيل المثال، عند الاطّلاع على خريطة للمتاجر الصغيرة، يمكنك اختيار عرض المتاجر التي تبيع تذاكر النقل العام فقط.

رسم مضلّع

تتولّى الفئة Data.Polygon عملية التفاف المضلّعات نيابةً عنك. ويمكنك تمرير مصفوفة من حلقة خطية واحدة أو أكثر، يتم تحديدها كإحداثيات خطوط العرض/الطول. تحدّد الحلقة الخطية الأولى الحدّ الخارجي للمضلّع. إذا مرّرت أكثر من حلقة خطية واحدة، يتم استخدام الحلقة الخطية الثانية والحلقات اللاحقة لتحديد المسارات الداخلية (الثقوب) في المضلّع.

ينشئ المثال التالي مضلّعًا مستطيلاً يحتوي على فتحتَين:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;index.js

تحميل GeoJSON

‫GeoJSON هو معيار شائع لمشاركة البيانات الجغرافية المكانية على الإنترنت. وهي خفيفة الوزن ويمكن لشخص عادي قراءتها بسهولة، ما يجعلها مثالية للمشاركة والتعاون. باستخدام طبقة البيانات، يمكنك إضافة بيانات GeoJSON إلى خريطة Google في سطر واحد فقط من الرموز البرمجية.

map.data.loadGeoJson('google.json');

تحتوي كل خريطة على عنصر map.data الذي يعمل كطبقة بيانات للبيانات الجغرافية المكانية العشوائية، بما في ذلك GeoJSON. يمكنك تحميل ملف GeoJSON وعرضه من خلال استدعاء طريقة loadGeoJSON() الخاصة بعنصر data. يوضّح المثال أدناه كيفية إضافة خريطة وتحميل بيانات GeoJSON خارجية.

TypeScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/layer-data-simple/dist/');

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson(new URL('./google.json', ASSET_BASE_URL).href);
}

void init();index.ts

JavaScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/layer-data-simple/dist/');

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson(new URL('./google.json', ASSET_BASE_URL).href);
}

void init();
export {};index.js

الاطّلاع على مثال

تجربة عيّنة

JSFiddle.net

حساب مساحة قطعة الأرض واحتواء النقطة في المضلّع في ميزات GeoJSON

لتحميل ملف GeoJSON FeatureCollection في الذاكرة (مثل قطع الأراضي في نظام المعلومات الجغرافية أو المناطق المساحية أو حدود الأقاليم) بدون جلب عنوان URL خارجي، يمكنك استدعاء map.data.addGeoJson(geojsonObject).

ملاحظة حول الحدود (Data.Polygon مقابل google.maps.geometry): الدوال في مكتبة geometry، مثل google.maps.geometry.spherical.computeArea() وgoogle.maps.geometry.poly.containsLocation()، لا تقبل عناصر google.maps.Data.Feature أو google.maps.Data.Polygon مباشرةً. لحساب المساحة بالمتر المربّع أو التحقّق مما إذا كانت الإحداثيات تقع داخل مضلّع GeoJSON، استخرِج مصفوفة LatLng الحلقة الخارجية باستخدام feature.getGeometry().getAt(0).getArray() أولاً:

const { spherical, poly } = await google.maps.importLibrary("geometry");

map.data.forEach((feature) => {
  const geom = feature.getGeometry();
  if (geom.getType() === "Polygon") {
    const outerRingCoords = geom.getAt(0).getArray(); // Array<google.maps.LatLng>
    const areaSqMeters = spherical.computeArea(outerRingCoords);
    const isInside = poly.containsLocation(pointLatLng, new google.maps.Polygon({ paths: outerRingCoords }));
  }
});

نموذج GeoJSON

تستخدم معظم الأمثلة في هذه الصفحة ملف GeoJSON شائعًا. يحدّد هذا الملف الأحرف الستة في كلمة "Google" كمضلّعات فوق أستراليا. لا تتردد في نسخ هذا الملف أو تعديله أثناء اختبار طبقة البيانات.

ملاحظة: لتحميل ملف json من نطاق آخر، يجب أن يكون هذا النطاق قد فعّل مشاركة الموارد مع نطاقات خارجية.

يمكن رؤية النص الكامل للملف أدناه من خلال توسيع السهم الصغير بجوار الكلمات google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

تنسيق بيانات GeoJSON

استخدِم طريقة Data.setStyle() لتحديد الشكل الذي يجب أن تظهر به بياناتك. تستخدم الطريقة setStyle() إما كائنًا حرفيًا StyleOptions أو دالة تحسب النمط لكل عنصر.

قواعد الأنماط البسيطة

إنّ أبسط طريقة لتنسيق العناصر هي تمرير كائن حرفي StyleOptions إلى setStyle(). سيؤدي ذلك إلى ضبط نمط واحد لكل معلم في مجموعتك. يُرجى العِلم أنّ كل نوع من أنواع الميزات يمكنه عرض مجموعة فرعية فقط من الخيارات المتاحة. وهذا يعني أنّه من الممكن دمج أنماط لأنواع مختلفة من العناصر في كائن حرفي واحد. على سبيل المثال، يضبط المقتطف أدناه كلاً من icon المخصّص، الذي يؤثر فقط في الأشكال الهندسية للنقاط، وfillColor، الذي يؤثر فقط في المضلّعات.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

يمكنك العثور على مزيد من المعلومات حول مجموعات الأنماط/الميزات الصالحة في خيارات النمط.

في ما يلي مثال على ضبط لون الحدّ الخارجي ولون التعبئة لعدة معالم باستخدام كائن حرفي StyleOptions. لاحظ أن كل مضلع تم تصميمه بنفس الطريقة.

TypeScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/layer-data-style/dist/');

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson(
            new URL('./google.json', ASSET_BASE_URL).href
        );
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();index.ts

JavaScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/layer-data-style/dist/');

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson(
            new URL('./google.json', ASSET_BASE_URL).href
        );
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();
export {};index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>index.html

الاطّلاع على مثال

تجربة عيّنة

JSFiddle.net

قواعد الأنماط التعريفية

إذا أردت تعديل نمط عدد كبير من العناصر المركّبة، مثل العلامات أو الخطوط المتعدّدة، عليك عادةً تكرار العملية لكل عنصر مركّب على خريطتك وضبط نمطه بشكل فردي. باستخدام طبقة البيانات، يمكنك وضع القواعد بشكل تعريفي وسيتم تطبيقها على مجموعة البيانات بأكملها. عند تعديل البيانات أو القواعد، سيتم تطبيق الأنماط تلقائيًا على كل عنصر. يمكنك استخدام خصائص المعالم لتخصيص نمطها.

على سبيل المثال، يضبط الرمز أدناه لون كل حرف في google.json من خلال فحص موضعه في مجموعة أحرف ASCII. في هذه الحالة، قمنا بترميز موضع الحرف مع بياناتنا.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

إزالة الأنماط

إذا أردت إزالة أي أنماط مطبَّقة، يمكنك تمرير كائن حرفي فارغ إلى الطريقة setStyles().

// Remove custom styles.
map.data.setStyle({});

سيؤدي ذلك إلى إزالة أي أنماط مخصّصة حدّدتها، وسيتم عرض الميزات باستخدام الأنماط التلقائية. إذا أردت بدلاً من ذلك عدم عرض الميزات، اضبط السمة visible في StyleOptions على false.

// Hide the Data layer.
map.data.setStyle({visible: false});

تجاوز الأنماط التلقائية

يتم عادةً تطبيق قواعد الأنماط على كل عنصر في طبقة البيانات. ومع ذلك، هناك أوقات ترغب فيها في تطبيق قواعد تصميم خاصة على ميزات معينة. على سبيل المثال، كطريقة لإبراز ميزة عند النقر.

لتطبيق قواعد تنسيق خاصة، استخدِم طريقة overrideStyle(). أي سمات تغيّرها باستخدام طريقة overrideStyle() يتم تطبيقها بالإضافة إلى الأنماط العامة المحدّدة في setStyle(). على سبيل المثال، سيؤدي الرمز أدناه إلى تغيير لون تعبئة مضلّع عند النقر عليه، ولكن لن يتم ضبط أي أنماط أخرى.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

استخدِم طريقة revertStyle() لإزالة جميع عمليات إلغاء الأنماط.

خيارات الخط

تعتمد الخيارات المتاحة لتصميم كل عنصر على نوع العنصر. على سبيل المثال، لن يتم عرض fillColor إلا على الأشكال الهندسية المضلّعة، بينما لن يظهر icon إلا على شكل هندسي نقطي. تتوفّر معلومات إضافية في المستندات المرجعية لـ StyleOptions.

متاحة لجميع الأشكال الهندسية

‫clickable: إذا كانت القيمة true، تتلقّى الميزة أحداث الماوس واللمس
‫visible: إذا كانت القيمة true، تكون الميزة مرئية.
‫zIndex: يتم عرض جميع العناصر على الخريطة حسب ترتيب zIndex، مع عرض القيم الأعلى أمام العناصر ذات القيم الأقل. يتم عرض العلامات دائمًا أمام السلاسل الخطية والمضلّعات.

متوفّرة في الأشكال الهندسية النقطية

‫cursor: مؤشر الماوس الذي يظهر عند التمرير فوقه
‫icon: الرمز الذي يظهر لهندسة النقطة
‫shape: تحدّد مخطط الصورة المستخدَم لرصد النقرات.
‫title: نص يظهر عند تمرير مؤشر الماوس فوقه

متاحة على الأشكال الهندسية الخطية

‫strokeColor: لون الخط جميع ألوان CSS3 متاحة باستثناء الألوان المسمّاة الموسّعة.
‫strokeOpacity: تمثّل هذه السمة درجة تعتيم الخط بين 0.0 و1.0.
‫strokeWeight: عرض الخط بالبكسل

متوفّرة في الأشكال الهندسية المضلّعة

‫fillColor: لون التعبئة تتوفّر جميع ألوان CSS3 باستثناء الألوان المسمّاة الموسّعة.
‫fillOpacity: تعتيم التعبئة بين 0.0 و1.0.
‫strokeColor: لون الخط جميع ألوان CSS3 متاحة باستثناء الألوان المسمّاة الموسّعة.
‫strokeOpacity: تمثّل هذه السمة درجة تعتيم الخط بين 0.0 و1.0.
‫strokeWeight: عرض الخط بالبكسل

إضافة معالِجات الأحداث

تستجيب الميزات للأحداث، مثل mouseup أو mousedown. يمكنك إضافة متتبِّعات الأحداث للسماح للمستخدمين بالتفاعل مع البيانات على الخريطة. في المثال أدناه، نضيف حدث mouseover يعرض معلومات عن العنصر تحت مؤشر الماوس.

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});index.js

أحداث طبقة البيانات

الأحداث التالية شائعة في جميع المعالم، بغض النظر عن نوعها الهندسي:

addfeature
click
dblclick
mousedown
mouseout
mouseover
mouseup
removefeature
removeproperty
rightclick
setgeometry
setproperty

يمكن العثور على مزيد من المعلومات حول هذه الأحداث في المستندات المرجعية لفئة google.maps.data.

تغيير المظهر ديناميكيًا

يمكنك ضبط نمط طبقة البيانات من خلال تمرير دالة تحسب نمط كل ميزة إلى طريقة google.maps.data.setStyle(). سيتم استدعاء هذه الدالة في كل مرة يتم فيها تعديل خصائص عنصر.

في المثال أدناه، نضيف متتبِّع أحداث للحدث click الذي يعدّل السمة isColorful للعنصر. يتم تعديل نمط العنصر ليعكس التغيير فور ضبط السمة.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

طبقة البيانات تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

نظرة عامة

رسم مضلّع

TypeScript

JavaScript

تحميل GeoJSON

TypeScript

JavaScript

تجربة عيّنة

حساب مساحة قطعة الأرض واحتواء النقطة في المضلّع في ميزات GeoJSON

نموذج GeoJSON

google.json

تنسيق بيانات GeoJSON

قواعد الأنماط البسيطة

TypeScript

JavaScript

CSS

HTML

تجربة عيّنة

قواعد الأنماط التعريفية

إزالة الأنماط

تجاوز الأنماط التلقائية

خيارات الخط

إضافة معالِجات الأحداث

أحداث طبقة البيانات

تغيير المظهر ديناميكيًا

طبقة البيانات