Veri Katmanı

Platform seçin: Android iOS JavaScript

Google Haritalar Veri katmanı, rastgele coğrafi veriler için bir kapsayıcı sağlar. Özel verilerinizi depolamak veya GeoJSON verilerini Google haritasında görüntülemek için veri katmanını kullanabilirsiniz.

Genel Bakış

Veri katmanı hakkında daha fazla bilgi edinmek için bu DevBytes videosunu izleyin.

Maps JavaScript API ile haritayı işaretçiler, çoklu çizgiler, çokgenler gibi çeşitli yer paylaşımlarıyla işaretleyebilirsiniz. Bu ek açıklamaların her biri, stil bilgilerini konum verileriyle birleştirir. google.maps.Data sınıfı, rastgele coğrafi veriler için bir kapsayıcıdır. Bu yer paylaşımlarını eklemek yerine, haritanıza rastgele coğrafi veriler eklemek için veri katmanını kullanabilirsiniz. Bu veriler nokta, çizgi veya poligon gibi geometriler içeriyorsa API bunları varsayılan olarak işaretçi, çoklu çizgi ve poligon olarak oluşturur. Bu özellikleri normal bir yer paylaşımı gibi biçimlendirebilir veya veri kümenizdeki diğer özelliklere göre stil kuralları uygulayabilirsiniz.

google.maps.Data sınıfı sayesinde şunları yapabilirsiniz:

  • Haritanızda poligonlar çizin.
  • Haritanıza GeoJSON verileri ekleme
    GeoJSON, internetteki coğrafi veriler için bir standarttır. Data sınıfı, veri gösteriminde GeoJSON yapısını kullanır ve GeoJSON verilerinin kolayca gösterilmesini sağlar. GeoJSON verilerini kolayca içe aktarmak ve noktaları, çizgi dizilerini ve poligonları görüntülemek için loadGeoJson() yöntemini kullanın.
  • Rastgele verileri modellemek için google.maps.Data kullanın.
    Gerçek dünyadaki çoğu varlığın kendisiyle ilişkili başka özellikleri vardır. Örneğin, mağazaların çalışma saatleri, yolların trafik hızı ve her izci grubunun kurabiye sattığı bir bölge vardır. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinizi buna göre biçimlendirebilirsiniz.
  • Verilerinizin nasıl temsil edileceğini seçin ve fikrinizi anında değiştirin.
    Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimi hakkında kararlar almanıza olanak tanır. Örneğin, marketlerin haritasına bakarken yalnızca toplu taşıma bileti satan marketleri görüntülemeyi seçebilirsiniz.

Poligon çizme

Data.Polygon sınıfı, poligon sarmayı sizin için gerçekleştirir. Enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halkadan oluşan bir dizi iletebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halka iletirseniz ikinci ve sonraki doğrusal halkalar, çokgendeki iç yolları (delikleri) tanımlamak için kullanılır.

Aşağıdaki örnekte, içinde iki delik bulunan dikdörtgen bir çokgen oluşturulmaktadır:

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 yükleme

GeoJSON, internette coğrafi veri paylaşmak için yaygın olarak kullanılan bir standarttır. Hafif ve kolayca okunabilir olması, paylaşım ve ortak çalışma için idealdir. Veri katmanıyla, tek bir kod satırında Google haritasına GeoJSON verileri ekleyebilirsiniz.

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

Her haritada, GeoJSON dahil olmak üzere rastgele coğrafi veriler için veri katmanı görevi gören bir map.data nesnesi bulunur. data nesnesinin loadGeoJSON() yöntemini çağırarak bir GeoJSON dosyasını yükleyip görüntüleyebilirsiniz. Aşağıdaki örnekte, harita ekleme ve harici GeoJSON verilerini yükleme işlemleri gösterilmektedir.

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();
Örneği görüntüleyin

GeoJSON özelliklerinde arsa parseli alanını ve poligon içindeki noktayı hesaplama

Harici bir URL'yi getirmeden bellek içi GeoJSON FeatureCollection (ör. CBS arazi parselleri, kadastro bölgeleri veya bölge sınırları) yüklemek için map.data.addGeoJson(geojsonObject) yöntemini çağırın.

Sınır notu (Data.Polygon ve google.maps.geometry): geometry kitaplığındaki google.maps.geometry.spherical.computeArea() ve google.maps.geometry.poly.containsLocation() gibi işlevler, google.maps.Data.Feature veya google.maps.Data.Polygon nesnelerini doğrudan kabul etmez. Alanı metrekare cinsinden hesaplamak veya bir koordinatın GeoJSON poligonunun içinde olup olmadığını kontrol etmek için önce feature.getGeometry().getAt(0).getArray() ile dış halkanın LatLng dizisini çıkarın:

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

Örnek GeoJSON

Bu sayfadaki örneklerin çoğu ortak bir GeoJSON dosyası kullanır. Bu dosya, "Google" kelimesindeki altı karakteri Avustralya üzerinde poligonlar olarak tanımlar. Veri katmanını test ederken bu dosyayı kopyalayabilir veya değiştirebilirsiniz.

Not: Başka bir alan adından JSON dosyası yüklemek için ilgili alan adında çapraz kaynak kaynak paylaşımı etkinleştirilmiş olmalıdır.

Dosyanın tam metnini, google.json kelimelerinin yanındaki küçük oku genişleterek aşağıda görebilirsiniz.

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 Verilerini Biçimlendirme

Verilerinizin nasıl görünmesi gerektiğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir StyleOptions nesne değişmez değeri veya her bir özelliğin stilini hesaplayan bir işlev alır.

Basit stil kuralları

Özellikleri biçimlendirmenin en basit yolu, setStyle() yöntemine bir StyleOptions nesne değişmez değeri iletmektir. Bu işlem, koleksiyonunuzdaki her özellik için tek bir stil ayarlar. Her özellik türünün, mevcut seçeneklerin yalnızca bir alt kümesini oluşturabileceğini unutmayın. Bu, farklı özellik türleri için stilleri tek bir nesne değişmez değerinde birleştirmenin mümkün olduğu anlamına gelir. Örneğin, aşağıdaki snippet hem yalnızca nokta geometrilerini etkileyen özel bir icon hem de yalnızca poligonları etkileyen fillColor ayarlarını yapar.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Geçerli stil/özellik kombinasyonları hakkında daha fazla bilgiyi Stil Seçenekleri bölümünde bulabilirsiniz.

Aşağıda, StyleOptions nesne değişmez değeri kullanarak birkaç özelliğin kontur ve dolgu rengini ayarlama örneği verilmiştir. Her poligonun aynı şekilde stilize edildiğine dikkat edin.

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>
Örneği görüntüleyin

Bildirim temelli stil kuralları

İşaretçiler veya çoklu çizgiler gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız genellikle haritanızdaki her yer paylaşımını tek tek incelemeniz ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı sayesinde kuralları bildirimli olarak ayarlayabilirsiniz. Bu kurallar tüm veri kümenize uygulanır. Veriler veya kurallar güncellendiğinde stil, her özelliğe otomatik olarak uygulanır. Bir özelliğin stilini özelleştirmek için özelliklerini kullanabilirsiniz.

Örneğin, aşağıdaki kod, ASCII karakter kümesindeki konumunu inceleyerek google.json içindeki her karakterin rengini ayarlar. Bu örnekte, karakter konumunu verilerimizle birlikte kodladık.

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

Stilleri kaldır

Uygulanan stilleri kaldırmak istiyorsanız setStyles() yöntemine boş bir nesne değişmez değeri iletin.

// Remove custom styles.
map.data.setStyle({});

Bu işlem, belirttiğiniz tüm özel stilleri kaldırır ve özellikler varsayılan stiller kullanılarak oluşturulur. Özellikleri artık oluşturmak istemiyorsanız StyleOptions öğesinin visible özelliğini false olarak ayarlayın.

// Hide the Data layer.
map.data.setStyle({visible: false});

Varsayılan stilleri geçersiz kılma

Stil kuralları genellikle Veri katmanındaki her özelliğe uygulanır. Ancak belirli özelliklere özel stil kuralları uygulamak istediğiniz zamanlar olabilir. Örneğin, tıklandığında bir özelliği vurgulamak için kullanılabilir.

Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. overrideStyle() yöntemiyle değiştirdiğiniz tüm özellikler, setStyle() içinde belirtilen genel stillere ek olarak uygulanır. Örneğin, aşağıdaki kod tıklandığında bir poligonun dolgu rengini değiştirir ancak başka bir stil ayarlamaz.

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

Tüm stil geçersiz kılmaları kaldırmak için revertStyle() yöntemini çağırın.

Stil seçenekleri

Her bir özelliğin stilini belirlemek için kullanabileceğiniz seçenekler, özellik türüne bağlıdır. Örneğin, fillColor yalnızca poligon geometrilerinde, icon ise yalnızca nokta geometrisinde oluşturulur. StyleOptions için referans dokümanlarında daha fazla bilgi bulabilirsiniz.

Tüm geometrilerde kullanılabilir

  • clickable: true ise özellik, fare ve dokunma etkinliklerini alır.
  • visible: true ise özellik görünür.
  • zIndex: Tüm özellikler, haritada zIndex değerlerine göre sıralanır. Daha yüksek değerlere sahip özellikler, daha düşük değerlere sahip özelliklerin önünde gösterilir. İşaretçiler her zaman çizgi dizilerinin ve çokgenlerin önünde gösterilir.

Nokta geometrilerinde kullanılabilir

  • cursor: Fareyle üzerine gelindiğinde gösterilecek fare imleci.
  • icon: Nokta geometrisi için gösterilecek simge.
  • shape: İsabet algılama için kullanılan resim haritasını tanımlar.
  • title: Fareyle üzerine gelindiğinde gösterilen metin.

Çizgi geometrilerinde kullanılabilir

  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında kontur opaklığı.
  • strokeWeight: Piksel cinsinden çizgi genişliği.

Çokgen geometrilerde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • fillOpacity: 0.0 ile 1.0. arasındaki dolgu opaklığı
  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında kontur opaklığı.
  • strokeWeight: Piksel cinsinden çizgi genişliği.

Etkinlik İşleyicileri Ekleme

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşim kurmasına olanak tanımak için etkinlik işleyiciler ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altındaki özellik hakkında bilgi gösteren bir imleçle üzerine gelme etkinliği ekliyoruz.

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

Veri katmanı etkinlikleri

Aşağıdaki etkinlikler, geometri türünden bağımsız olarak tüm özelliklerde ortaktır:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Bu etkinlikler hakkında daha fazla bilgiyi google.maps.data sınıfının referans belgelerinde bulabilirsiniz.

Görünümü Dinamik Olarak Değiştirme

Her bir özelliğin stilini hesaplayan bir işlevi google.maps.data.setStyle() yöntemine ileterek veri katmanının stilini ayarlayabilirsiniz. Bu işlev, bir özelliğin özellikleri her güncellendiğinde çağrılır.

Aşağıdaki örnekte, özelliğin isColorful özelliğini güncelleyen click etkinliği için bir etkinlik işleyici ekliyoruz. Özellik stili, özellik ayarlanır ayarlanmaz değişikliği yansıtacak şekilde güncellenir.

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