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 bir renk skalası olarak gösterilir 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ılamayacağını veya sürüklenemeyeceğini ancak yakınlaştırmaya izin verecek şekilde yapılandırılabileceğini unutmayın.

Örnekler

Burada iki örnek görüyorsunuz: Bölgelerin görüntüleme stilini ve diğeri işaretçilerin görüntüleme stilini kullanan.

Bölgeler Örneği

Bölgeler stili, tüm bölgeleri (genellikle ülkeler) atadığınız değerlere karşılık gelen renklerle doldurur. Kodunuza options['dataMode'] = 'regions' atayarak bölgelerin 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 göstermek için boyut ve renkli bir daire gösterir.

<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 paket adı "geomap"

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

Coğrafi harita görselleştirme sınıfı 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 adreslerden birinin kullanımı gereklidir; türleri karıştıramazsınız.

1. Biçim: Enlem/Boylam konumları. Bu biçim yalnızca dataMode seçeneği "işaretçiler" olduğunda çalışır. Bu biçim kullanılıyorsa Google Harita JavaScript'i eklemeniz gerekmez. Konum, iki sütuna ve isteğe bağlı iki sütuna girilir:
1. [Sayı, Zorunlu] Enlem. Pozitif sayılar kuzey, negatif sayılar güneydir.
2. [Sayı, Zorunlu] Bir boylam. Pozitif sayılar doğuda, negatif sayılar batıdadır.
3. [Sayı, İsteğe Bağlı] Kullanıcı bu bölgenin üzerine geldiğinde gösterilen sayısal bir değer. 4. sütun kullanılıyorsa bu sütun zorunludur.
4. [Dize, İsteğe Bağlı] Kullanıcı bu bölgenin üzerine geldiğinde gösterilen ek dize metni.
2. Biçim: Adres, ülke adı, bölge adı konumları veya ABD metropol alanları. Bu biçim, "seçiciler" veya "bölgeler" olarak ayarlanmış dataMode seçeneğiyle çalışır. Konum bir sütuna ve isteğe bağlı iki sütuna girilir:
1. [Dize, Gerekli] Harita konumu. Aşağıdaki biçimler kabul edilir:
  - Belirli bir adres (ör. "1600 Pennsylvania Ave").
  - Dize olarak ülke adı (örneğin, "İngiltere") veya büyük harflerle ISO-3166 kodu veya İngilizce metin eşdeğeri (ör. "GB" veya "Birleşik Krallık").
  - Büyük harfli ISO-3166-2 bölge kod adı veya İngilizce metin eşdeğeri (örneğin, "US-NJ" veya "New Jersey"). Not: Bölgeler, yalnızca dataMode seçeneği "regions" (bölge) olarak ayarlandığında belirtilebilir.
  - Metropolitan alan kodu. Bunlar, çeşitli bölgeleri belirtmek için kullanılan üç haneli metropol alanı 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ı bu bölgenin üzerine geldiğinde gösterilen sayısal bir değer. 3. sütun kullanılıyorsa bu sütun zorunludur.
3. [Dize, İsteğe Bağlı] Kullanıcı bu bölgenin üzerine geldiğinde gösterilen ek dize metni.

Not: Bir haritada en fazla 400 giriş görüntülenebilir. DataTable veya DataView satırlarınız 400'den fazla satır içeriyorsa, yalnızca ilk 400 giriş gösterilir. En hızlı modlar, konum olarak ISO kodlarıyla dataMode='regions' ve enlem/boylam değerleriyle dataMode='markers' kullanılır. En yavaş mod, dize adresiyle dataMode='markers'.

Önemli: DataTable sütunu, kullanmak istediğiniz sütunların önünde yer alan isteğe bağlı sütunların tamamını içermelidir. Örneğin, enlem/boylam tablosu belirtmek ve yalnızca 1., 2. ve 4. sütunları kullanmak istiyorsanız DataTable sütununuzu yine de tanımlamanız gerekir (bu değere herhangi bir değer eklemeniz gerekmez):

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`	string	"dünya"	Haritada görüntülenecek alan. (Çevre alanlar da görüntülenir.) Bir ülke kodu (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` - (Tüm Afrika) `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ı değil, yalnızca sınırlı yakınlaştırma davranışını etkinleştirir. Temel bir uzaklaştırma özelliği `showZoomOut` özelliği ayarlanarak etkinleştirilebilir.
`dataMode`	string	"bölgeler"	Değerler haritada nasıl görüntülenir? İki değer desteklenir: `regions` - Tüm bölgeyi uygun renkle boyar. Bu seçenek enlem/boylam adresleriyle kullanılamaz. Bölge Örneği bölümüne bakın. `markers` - Bölgenin üzerinde, değeri ve boyutu belirten bir nokta görüntüler. İşaretçi Örneği bölümüne bakın.
`width`	string	"556 px"	Görselleştirmenin genişliği. Herhangi bir birim belirtilmemişse varsayılan birim pikseldir.
`height`	string	"347px"	Görselleştirmenin yüksekliği. Herhangi bir birim belirtilmemişse varsayılan birim pikseldir.
`colors`	0xRRGGBB biçiminde RGB numaraları dizisi	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Görselleştirmedeki değerlere atanacak renk gradyanı. En az iki değere sahip olmanız gerekir. Gradyan, tüm değerlerinizi ve hesaplanan aracı değerlerini (en küçük değer en açık renk, en koyu renk en yüksek değer) içerir.
`showLegend`	boolean	true	Doğru ise harita için bir açıklama görüntüleyin.
`showZoomOut`	boolean	yanlış	Doğruysa `zoomOutLabel` özelliği tarafından belirtilen etikete sahip bir düğme görüntüleyin. `zoomOut` etkinliğini silmek dışında, bu düğmenin tıklandığında hiçbir şey yapmadığını unutmayın. Yakınlaştırmayı işlemek için bu etkinliği yakalayın ve `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ölgeye değiştirmek ve haritayı yeniden yüklemektir.
`zoomOutLabel`	string	"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 önce geri dönebilir (`drawingDone()` etkinliğine göz atın).
`getSelection()`	Seçim öğesi dizisi	Standart `getSelection()` uygulaması. Seçilen öğeler satırlardır. Bu yöntem yalnızca `dataMode` seçeneği "regions" (bölgeler) olduğunda çalışır. Yalnızca atanmış değeri olan bir bölgeyi seçebilirsiniz.
`setSelection(selection)`	Yok	Standart `setSelection()` uygulaması. Seçimi satır seçimi olarak ele alır ve birden fazla satır seçimini destekler. Yalnızca atanmış değerleri olan bölgeler seçilebilir.

Etkinlikler

Ad	Açıklama	Özellikler
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.	kimlik, mesaj
`select`	Kullanıcı, atanmış değere sahip bir bölgeyi tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın. Yalnızca `dataMode` seçeneği "regions" (bölgeler) olarak ayarlandığında kullanılabilir. Not: Tarayıcınızdaki sayfaya bir dosya olarak erişiyorsanız belirli sınırlamalar nedeniyle `select` etkinliği atlanmaz (ör. "file://") ekler. "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 belirtilen belirli bir ülke için (belirli bir ülke listeleniyorsa) atılmaz. Not: Belirli sınırlamalar nedeniyle `regionClick` etkinliği, tarayıcınızda dosyaya bir dosya olarak erişiyorsanız (ör. "file://") ekler. "http://www").	`region` özellikli bir nesne. Bu nesne, tıklanan bölgeyi açıklayan ISO-3166 biçiminde bir dizedir.
`zoomOut`	Uzaklaştır düğmesi tıklandığında çağrılır. Yakınlaştırmayı işlemek için bu etkinliği yakalayın ve `region` seçeneğini değiştirin. Not: Tarayıcınızdaki sayfaya bir dosya olarak erişiyorsanız belirli sınırlamalar nedeniyle `zoomOut` etkinliği atlanmaz (ör. "file://") ekler. "http://www").	Yok
`drawingDone`	Coğrafi eşlemenin çizimi tamamlandığında çağrılır.	Yok

Veri Politikası

Konumlar Google Haritalar tarafından coğrafi kodlamaya tabidir. Coğrafi kodlama gerektirmeyen veriler hiçbir sunucuya gönderilmez. Veri politikaları hakkında daha fazla bilgi için lütfen Google Haritalar Hizmet Şartları'nı inceleyin.

Notlar

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