لایه داده

پلاتفرم را انتخاب کنید: Android iOS JavaScript

لایه «داده‌های Google Maps» محفظه‌ای برای داده‌های زمین‌مکانی دلخواه ارائه می‌دهد. می‌توانید از لایه «داده» برای ذخیره کردن داده‌های سفارشی‌تان یا نمایش داده‌های GeoJSON در Google Map استفاده کنید.

نمای کلی

برای کسب اطلاعات بیشتر درباره «لایه داده»، این ویدیو DevBytes را تماشا کنید.

با Maps JavaScript API می‌توانید نقشه را با انواع مختلفی از هم‌پوشانی‌ها، مانند نشانگرها، چندخطی‌ها، چندضلعی‌ها، و غیره نشانه‌گذاری کنید. هریک از این حاشیه‌نویسی‌ها اطلاعات سبک را با داده‌های مکان ترکیب می‌کند. کلاس google.maps.Data محفظه‌ای برای داده‌های زمین‌مکانی دلخواه است. به‌جای افزودن این هم‌پوشانی‌ها، می‌توانید از لایه «داده» برای افزودن داده‌های جغرافیایی دلخواه به نقشه‌تان استفاده کنید. اگر آن داده‌ها حاوی اشکال هندسی، مانند نقاط، خطوط، یا چندضلعی‌ها باشند، API به‌طور پیش‌فرض آن‌ها را به‌عنوان نشانگر، چندخطی، و چندضلعی ارائه خواهد کرد. می‌توانید این ویژگی‌ها را مانند یک هم‌پوشانی معمولی سبک‌بندی کنید، یا قوانین سبک‌بندی را براساس سایر ویژگی‌های موجود در مجموعه داده‌های خود اعمال کنید.

کلاس 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;

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;

بار کردن GeoJSON

GeoJSON استانداردی رایج برای هم‌رسانی داده‌های زمین‌مکانی در اینترنت است. این قالب سبک است و به‌راحتی برای انسان قابل‌خواندن است، که آن را برای هم‌رسانی و مشارکت ایده‌آل می‌کند. با لایه «داده»، می‌توانید داده‌های GeoJSON را فقط با یک خط کد به نقشه Google اضافه کنید.

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

هر نقشه دارای یک شیء map.data است که به‌عنوان لایه داده برای داده‌های زمین‌مکانی دلخواه، ازجمله GeoJSON، عمل می‌کند. می‌توانید با فراخوانی روش loadGeoJSON() شیء data، فایل GeoJSON را بار کنید و نمایش دهید. مثال زیر نحوه افزودن نقشه و بار کردن داده‌های 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();

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();
مشاهده نمونه

نمونه 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();

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

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;
}

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>
مشاهده نمونه

قوانین سبک اعلانی

اگر می‌خواهید سبک تعداد زیادی از هم‌پوشانی‌ها، مانند نشانگرها یا چندخطی‌ها را به‌روز کنید، معمولاً باید هر هم‌پوشانی را در نقشه خود تکرار کنید و سبک آن را به‌صورت جداگانه تنظیم کنید. با «لایه داده»، می‌توانید قوانین را به‌صورت اعلانی تنظیم کنید و این قوانین در کل مجموعه داده‌های شما اعمال خواهند شد. وقتی داده‌ها یا قوانین به‌روزرسانی شوند، سبک‌بندی به‌طور خودکار برای همه عارضه‌ها اعمال خواهد شد. می‌توانید از ویژگی‌های عارضه برای سفارشی‌سازی سبک آن استفاده کنید.

برای مثال، کد زیر رنگ هر نویسه را در 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: ماتی ضرب‌قلم بین ۰٫۰ و ۱٫۰.
  • ‫strokeWeight: عرض خط به پیکسل.

دردسترس در هندسه‌های چندضلعی

  • ‫fillColor: رنگ پرکننده. همه رنگ‌های CSS3 به‌جز رنگ‌های نام‌گذاری‌شده گسترده پشتیبانی می‌شوند.
  • ‫fillOpacity: ماتی پرکننده بین 0.0 و 1.0.
  • ‫strokeColor: رنگ خط پیرامونی. همه رنگ‌های CSS3 به‌جز رنگ‌های نام‌گذاری‌شده گسترده پشتیبانی می‌شوند.
  • ‫strokeOpacity: ماتی ضرب‌قلم بین ۰٫۰ و ۱٫۰.
  • ‫strokeWeight: عرض خط به پیکسل.

افزودن گرداننده‌های رویداد

ویژگی‌ها به رویدادهایی مثل mouseup یا mousedown پاسخ می‌دهند. می‌توانید شنونده‌های رویداد اضافه کنید تا به کاربران اجازه دهید با داده‌های روی نقشه تعامل داشته باشند. در مثال زیر، رویداد حرکت ماوس را اضافه می‌کنیم که اطلاعات مربوط به ویژگی را زیر مکان‌نمای موشواره نمایش می‌دهد.

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (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();
});