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

اختيار النظام الأساسي: 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 مشتركًا. يحدّد هذا الملف الأحرف الستة في كلمة "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. يمكنك إضافة أدوات معالجة الأحداث للسماح للمستخدمين بالتفاعل مع البيانات على الخريطة. في المثال أدناه، نضيف حدثًا عند التمرير بالماوس يعرض معلومات حول الميزة تحت مؤشر الماوس.

// 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();
});