Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

لایه داده

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

لایه داده‌های نقشه‌های گوگل، بستری برای داده‌های مکانی دلخواه فراهم می‌کند. می‌توانید از لایه داده‌ها برای ذخیره داده‌های سفارشی خود یا نمایش داده‌های GeoJSON روی نقشه گوگل استفاده کنید.

نمای کلی

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

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

کلاس google.maps.Data به شما امکان می‌دهد:

چندضلعی‌ها را روی نقشه خود رسم کنید.
داده‌های GeoJSON را به نقشه خود اضافه کنید.
GeoJSON استانداردی برای داده‌های مکانی در اینترنت است. کلاس Data از ساختار GeoJSON در نمایش داده‌ها پیروی می‌کند و نمایش داده‌های GeoJSON را آسان می‌کند. از متد loadGeoJson() برای وارد کردن آسان داده‌های GeoJSON و نمایش نقاط، رشته‌های خط و چندضلعی‌ها استفاده کنید.
از google.maps.Data برای مدل‌سازی داده‌های دلخواه استفاده کنید.
بیشتر موجودیت‌های دنیای واقعی، ویژگی‌های دیگری نیز دارند که با آنها مرتبط هستند. برای مثال، فروشگاه‌ها ساعات کاری، جاده‌ها سرعت ترافیک و هر گروه راهنمای دختران، زمین مخصوص فروش شیرینی دارند. با google.maps.Data می‌توانید این ویژگی‌ها را مدل‌سازی کرده و داده‌های خود را بر اساس آنها سبک‌دهی کنید.
نحوه نمایش داده‌های خود را انتخاب کنید و فوراً نظرتان را تغییر دهید .
لایه داده به شما امکان می‌دهد در مورد تجسم و تعامل داده‌های خود تصمیم‌گیری کنید. برای مثال، هنگام مشاهده نقشه فروشگاه‌های رفاه، ممکن است انتخاب کنید که فقط فروشگاه‌هایی که بلیط حمل و نقل عمومی می‌فروشند نمایش داده شوند.

رسم یک چندضلعی

کلاس Data.Polygon پیچش چندضلعی را برای شما مدیریت می‌کند. می‌توانید آرایه‌ای از یک یا چند حلقه خطی، که به صورت مختصات عرض/طول جغرافیایی تعریف شده‌اند، را به آن ارسال کنید. اولین حلقه خطی، مرز بیرونی چندضلعی را تعریف می‌کند. اگر بیش از یک حلقه خطی ارسال کنید، حلقه‌های خطی دوم و بعدی برای تعریف مسیرهای داخلی (حفره‌ها) در چندضلعی استفاده می‌شوند.

مثال زیر یک چندضلعی مستطیلی با دو سوراخ در آن ایجاد می‌کند:

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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 را تنها با یک خط کد به نقشه گوگل اضافه کنید.

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

هر نقشه دارای یک شیء map.data است که به عنوان یک لایه داده برای داده‌های جغرافیایی دلخواه، از جمله GeoJSON، عمل می‌کند. می‌توانید با فراخوانی متد loadGeoJSON() از شیء data ، یک فایل GeoJSON را بارگذاری و نمایش دهید. مثال زیر نحوه اضافه کردن یک نقشه و بارگذاری داده‌های GeoJSON خارجی را نشان می‌دهد.

تایپ اسکریپت

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

جاوا اسکریپت

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 از دامنه دیگر، آن دامنه باید قابلیت Cross-origin resource sharing را فعال کرده باشد.

متن کامل فایل را می‌توانید در زیر با باز کردن فلش کوچک کنار کلمات google.json مشاهده کنید.

گوگل.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'
});

اطلاعات بیشتر در مورد ترکیب‌های معتبر سبک/ویژگی را می‌توانید در گزینه‌های سبک (Style Options) بیابید.

در زیر مثالی از تنظیم رنگ خط دور و رنگ داخل برای چندین ویژگی با استفاده از شیء StyleOptions به صورت تحت‌اللفظی آورده شده است. توجه داشته باشید که هر چندضلعی به طور یکسان استایل‌بندی می‌شود.

تایپ اسکریپت

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

جاوا اسکریپت

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

سی اس اس

/* 
 * 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>
    <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

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

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

برای مثال، کد زیر با بررسی موقعیت هر کاراکتر در مجموعه کاراکترهای ascii، رنگ آن کاراکتر را در فایل google.json ما تنظیم می‌کند. در این حالت، موقعیت کاراکتر را به همراه داده‌های خود کدگذاری کرده‌ایم.

// 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 : If true , the feature receives mouse and touch events
visible : اگر true ، ویژگی قابل مشاهده است.
zIndex : تمام عوارض بر اساس zIndex خود روی نقشه نمایش داده می‌شوند، به طوری که مقادیر بالاتر در جلوی عوارض با مقادیر پایین‌تر نمایش داده می‌شوند. نشانگرها همیشه در جلوی رشته‌های خط و چندضلعی‌ها نمایش داده می‌شوند.

موجود در هندسه‌های نقطه‌ای

cursor : نشانگر ماوس برای نمایش در صورت قرار گرفتن ماوس روی آن.
icon : آیکونی برای نمایش هندسه نقطه‌ای.
shape : نقشه تصویر مورد استفاده برای تشخیص برخورد را تعریف می‌کند.
title : متن رول‌اُور.

هندسه‌های خطی موجود

strokeColor : رنگ خط دور متن. همه رنگ‌های CSS3 به جز رنگ‌های نامگذاری شده‌ی توسعه‌یافته پشتیبانی می‌شوند.
strokeOpacity : میزان شفافیت خط دور تصویر بین ۰.۰ تا ۱.۰.
strokeWeight : عرض stroke بر حسب پیکسل.

موجود در هندسه‌های چندضلعی

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

اضافه کردن کنترل‌کننده‌های رویداد

ویژگی‌ها به رویدادهایی مانند 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();
});

لایه داده با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نمای کلی

رسم یک چندضلعی

تایپ اسکریپت

جاوا اسکریپت

بارگذاری GeoJSON

تایپ اسکریپت

جاوا اسکریپت

نمونه را امتحان کنید

نمونه GeoJSON

گوگل.json

داده‌های GeoJSON را استایل‌دهی کنید

قوانین ساده برای استایل

تایپ اسکریپت

جاوا اسکریپت

سی اس اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

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

حذف استایل‌ها

نادیده گرفتن استایل‌های پیش‌فرض

گزینه‌های سبک

اضافه کردن کنترل‌کننده‌های رویداد

رویدادهای لایه داده

تغییر ظاهر به صورت پویا

لایه داده