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

اختيار النظام الأساسي: 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

ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

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

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

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

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
index.ts

ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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

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

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
index.js

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

حساب مساحة قطعة الأرض واحتواء النقطة في المضلّع في عناصر 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

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('google.json');
    });

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

void init();
index.ts

ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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('google.json');
    });

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

void init();
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

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

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

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

على سبيل المثال، يحدّد الرمز أدناه لون كل حرف في 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();
});