حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح إمكانية التخصيص والتطوير باستخدام الحد الأدنى من التعليمات البرمجية. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  let innerMap = mapElement.innerMap;

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

initMap();index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    let innerMap = mapElement.innerMap;
    innerMap.data.loadGeoJson("google.json");
}
initMap();index.js

عرض مثال

تجربة عيّنة

JSFiddle.net

نموذج 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 initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  const innerMap = mapElement.innerMap;

  // Load GeoJSON.
  google.maps.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,
  });
}

initMap();index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.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,
    });
}
initMap();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>
    <!-- prettier-ignore -->
    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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. يمكنك إضافة أدوات معالجة الأحداث للسماح للمستخدمين بالتفاعل مع البيانات على الخريطة. في المثال أدناه، نضيف حدثًا عند تمرير مؤشر الماوس، يعرض معلومات حول الميزة تحت مؤشر الماوس.

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

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

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

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

google.json

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

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

TypeScript

JavaScript

CSS

HTML

تجربة عيّنة

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

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

إلغاء الأنماط التلقائية

خيارات الخط

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

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

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

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