Bu sayfa, Cloud Translation API ile çevrilmiştir.

Görselleştirme: Coğrafi Harita

Genel bakış
Örnekler
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası
Notlar

Genel bakış

Coğrafi harita, belirli bölgelere atanmış renkler ve değerler içeren bir ülke, kıta veya bölge haritasıdır. Değerler renk skalası olarak görüntülenir ve bölgeler için isteğe bağlı fareyle üzerine gelme metni belirtebilirsiniz. Harita, yerleşik bir Flash oynatıcı kullanılarak tarayıcıda oluşturulur. Haritanın kaydırılabilir veya sürüklenebilir olmadığını, ancak yakınlaştırmaya izin verecek şekilde yapılandırılabileceğini unutmayın.

Örnekler

Burada, biri bölgelerin görüntüleme stilini, diğeri de işaretçi görüntüleme stilini kullanan iki örnek verilmiştir.

Bölgeler Örneği

Bölgeler stili, bölgelerin tamamını (genellikle ülkeler) atadığınız değerlere karşılık gelen renklerle doldurur. Kodunuzda options['dataMode'] = 'regions' atayarak bölge stilini belirtin.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

İşaretçi Örneği

"İşaretçiler" stili, belirttiğiniz bölgelerin üzerinde bir değeri belirtmek için boyutunda ve renkli bir daireyi görüntüler.

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Yükleniyor

google.charts.load paketinin adı: "geomap"

  google.charts.load('current', {'packages': ['geomap']});

Coğrafi harita görselleştirme sınıfının adı: google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Veri Biçimi

Her biri farklı sayıda sütunu ve her sütun için farklı veri türlerini destekleyen iki adres biçimi desteklenir. Tablodaki tüm adresler ikisinden birini kullanmalıdır; türleri karıştıramazsınız.

Biçim 1: Enlem/Boylam konumları. Bu biçim yalnızca dataMode seçeneği "işaretçiler" olduğunda çalışır. Bu biçim kullanılırsa Google Haritalar JavaScript'ini eklemeniz gerekmez. Konum, iki sütuna ve isteğe bağlı iki sütuna girilir:
1. [Sayı, Zorunlu] Bir enlem. Pozitif sayılar kuzey, negatif sayılar güneydir.
2. [Sayı, Zorunlu] Boylam. Pozitif sayılar doğu, negatif sayılar batıdır.
3. [Sayı, İsteğe Bağlı] Kullanıcı fareyle bu bölgenin üzerine geldiğinde gösterilen sayısal bir değerdir. 4. sütun kullanılıyorsa bu sütun gereklidir.
4. [Dize, İsteğe bağlı] Kullanıcı fareyle bu bölgenin üzerine geldiğinde gösterilen ek dize metni.
2. Biçim: Adres, ülke adı, bölge adı konumları veya ABD büyükşehir alan kodları. Bu biçim, dataMode seçeneği "işaretçiler" veya "bölgeler" olarak ayarlandığında kullanılabilir. Konum, bir sütuna ve isteğe bağlı iki sütuna girilir:
1. [Dize, Zorunlu] Bir harita konumu. Aşağıdaki biçimler kabul edilir:
  - Belirli bir adres (örneğin, "Kadıköy Caddesi").
  - Dize olarak bir ülke adı (ör. "İngiltere"), büyük harfli ISO-3166 kodu veya İngilizce metin eşdeğeri (örneğin, "GB" veya "Birleşik Krallık").
  - Büyük harfli ISO-3166-2 bölge kodu adı veya İngilizce metin eşdeğeri (ör. "US-NJ" veya "New Jersey"). Not: Bölgeler yalnızca dataMode seçeneği "bölge" olarak ayarlandığında belirtilebilir.
  - Metropol alan kodu. Bunlar, çeşitli bölgeleri belirtmek için kullanılan üç haneli metropol kodlarıdır; yalnızca ABD kodları desteklenir. Bunların, telefon alan kodlarıyla aynı olmadığını unutmayın.
2. [Sayı, İsteğe Bağlı] Kullanıcı fareyle bu bölgenin üzerine geldiğinde gösterilen sayısal bir değerdir. 3. sütun kullanılıyorsa bu sütun gereklidir.
3. [Dize, İsteğe bağlı] Kullanıcı fareyle bu bölgenin üzerine geldiğinde gösterilen ek dize metni.

Not: Bir haritada en fazla 400 giriş gösterilebilir. DataTable veya DataView'da 400'den fazla satır varsa sadece ilk 400 satır gösterilir. En hızlı modlar, konumların ISO kodları olarak belirtildiği dataMode='regions' ve enlem/boylam değerleriyle dataMode='markers' şeklindedir. En yavaş mod, dize adresine sahip dataMode='markers' modudur.

Önemli: DataTable ayarınız, kullanmak istediğiniz sütunlardan önceki isteğe bağlı tüm sütunları içermelidir. Örneğin, enlem/boylam tablosu belirtmek ve yalnızca 1, 2 ve 4. sütunları kullanmak istiyorsanız DataTable öğeniz yine de 3. sütunu tanımlamalıdır (ancak buna herhangi bir değer eklemenize gerek yoktur):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Yapılandırma Seçenekleri

Ad	Tür	Varsayılan	Açıklama
`region`	dize	"dünya"	Haritada görüntülenecek alan. (Çevreleyen alanlar da gösterilir.) Ülke kodu (büyük harfle ISO-3166 biçiminde) veya aşağıdaki dizelerden biri olabilir: `world` - (Tüm dünya) `us_metro` - (ABD, metropol alanları) `005` - (Güney Amerika) `013` - (Orta Amerika) `021` - (Kuzey Amerika) `002` - (Afrika'nın Tamamı) `017` - (Orta Afrika) `015` - (Kuzey Afrika) `018` - (Güney Afrika) `030` - (Doğu Asya) `034` - (Güney Asya) `035` - (Asya/Pasifik bölgesi) `009` - (Okyanusya) `145` - (Orta Doğu) `143` - (Orta Asya) `151` - (Kuzey Asya) `154` - (Kuzey Avrupa) `155` - (Batı Avrupa) `039` - (Güney Avrupa) Coğrafi harita, kaydırma veya sürükleme davranışını etkilemez, yalnızca sınırlı yakınlaştırma davranışını sağlar. `showZoomOut` özelliği ayarlanarak temel bir uzaklaştırma etkinleştirilebilir.
`dataMode`	dize	"bölgeler"	Değerler haritada nasıl gösterilir? İki değer desteklenir: `regions` - Tüm bölgeyi uygun renkle renklendirir. Bu seçenek enlem/boylam adresleriyle kullanılamaz. Bölgeler örneğini inceleyin. `markers` - Bir bölgenin üzerinde bir nokta görüntüler; renk ve boyut değeri belirtir. İşaretçiler Örneği'ni inceleyin.
`width`	dize	"556 piksel"	Görselleştirmenin genişliği. Herhangi bir birim belirtilmemişse varsayılan birim piksel olur.
`height`	dize	"347 piksel"	Görselleştirmenin yüksekliği. Herhangi bir birim belirtilmemişse varsayılan birim piksel olur.
`colors`	0xRRGGBB biçimindeki RGB sayıları dizisi	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Görselleştirmedeki değerlere atanacak renk gradyanı. En az iki değeriniz olmalıdır. Renk geçişi, tüm değerlerinizi ve en açık renk en küçük değer olarak, en koyu renk ise hesaplanan ara değerleri içerir.
`showLegend`	boolean	true	True (doğru) ise, harita için bir açıklama görüntüleyin.
`showZoomOut`	boolean	false	True (doğru) ise `zoomOutLabel` özelliği tarafından belirtilen etikete sahip bir düğme görüntüleyin. Bu düğme tıklandığında herhangi bir işlem yapmadığını unutmayın ancak `zoomOut` etkinliğini atmak dışında. Yakınlaştırmayı işlemek için bu etkinliği bulup `region` seçeneğini değiştirin. `showZoomOut` öğesini yalnızca `region` seçeneği dünya görünümünden küçükse belirtebilirsiniz. Yakınlaştırma davranışını etkinleştirmenin bir yolu, `regionClick` etkinliğini dinlemek, `region` özelliğini uygun bölgeyle değiştirmek ve haritayı yeniden yüklemektir.
`zoomOutLabel`	dize	"Uzaklaştır"	Yakınlaştırma düğmesinin etiketi.

Yöntemler

Yöntem	Dönüş Türü	Açıklama
`draw(data, options)`	Yok	Haritayı çizer. Çizim tamamlanmadan geri dönebilir (`drawingDone()` etkinliğine bakın).
`getSelection()`	Seçim öğeleri dizisi	Standart `getSelection()` uygulaması. Seçilen öğeler satırdır. Bu yöntem yalnızca `dataMode` seçeneği "bölge" olduğunda çalışır. Yalnızca değer atanmış bir bölgeyi seçebilirsiniz.
`setSelection(selection)`	Yok	Standart `setSelection()` uygulaması. Bir seçimi satır seçimi olarak değerlendirir ve birden fazla satır seçimini destekler. Yalnızca değer atanmış bölgeler seçilebilir.

Etkinlikler

Ad	Açıklama	Özellikler
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.	kimlik, ileti
`select`	Kullanıcı, atanmış değer olan bir bölgeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın. Yalnızca `dataMode` seçeneği "bölgeler" olarak ayarlandığında kullanılabilir. Not: Belirli sınırlamalardan dolayı, tarayıcınızda sayfaya bir dosya olarak erişiyorsanız `select` etkinliği atılmaz (ör. "file://") yerine bir sunucu (ör. "http://www").	Yok
`regionClick`	Bir bölge tıklandığında çağrılır. Hem "bölgeler" hem de "işaretçiler" `dataMode` için çalışır. Ancak işaretçi modunda bu, "bölge" seçeneğinde atanan belirli ülke için atılmaz (belirli bir ülke listelendiyse). Not: Belirli sınırlamalardan dolayı, tarayıcınızda sayfaya dosya olarak erişiyorsanız `regionClick` etkinliği "file://") yerine bir sunucu (ör. "http://www").	Tek özelliği `region` olan nesne, tıklanan bölgeyi açıklayan ISO-3166 biçiminde bir dizedir.
`zoomOut`	Uzaklaştırma düğmesi tıklandığında çağrılır. Yakınlaştırmayı işlemek için bu etkinliği bulup `region` seçeneğini değiştirin. Not: Belirli sınırlamalardan dolayı, tarayıcınızda sayfaya bir dosya olarak erişiyorsanız `zoomOut` etkinliği atılmaz (ör. "file://") yerine bir sunucu (ör. "http://www").	Yok
`drawingDone`	Coğrafi harita çizimi bittiğinde çağrılır.	Yok

Veri Politikası

Yerlerin coğrafi kodu Google Haritalar tarafından belirlenir. Coğrafi kodlama gerektirmeyen veriler hiçbir sunucuya gönderilmez. Veri politikası hakkında daha fazla bilgi edinmek için lütfen Google Haritalar Hizmet Şartları'na bakın.

Notlar

Flash güvenlik ayarları nedeniyle bu (ve tüm Flash tabanlı görselleştirmeler) bir web sunucusu URL'sinden (ör. http://www.anamakinem.com/myviz.html) değil, tarayıcıdaki bir dosya konumundan (ör. file:///c:/webhost/myhost/myviz.html) erişildiğinde doğru şekilde çalışmayabilir. Bu sorun genellikle yalnızca test amaçlıdır. Bu sorunu Macromedia web sitesinde açıklandığı şekilde çözebilirsiniz.