Haritalar'a Veri Aktarma

Genel bakış

GeoJSON verilerini yerel veya uzak kaynaktan nasıl içe aktaracağınızı ve haritanızda nasıl görüntüleyeceğinizi öğrenin. Bu eğiticide, haritalara veri aktarmaya yönelik çeşitli tekniklerin gösterilmesi için aşağıdaki harita kullanılmaktadır.

Aşağıdaki bölümde, bu eğiticide haritayı oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Earthquake Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Örneği Deneyin

Veri yükleme

Bu bölümde, Haritalar JavaScript API uygulamanızla aynı alan adından veya farklı bir alan adından nasıl veri yükleyeceğiniz gösterilmektedir.

Aynı alandan veri yükleme

Google Haritalar Veri Katmanı, rastgele coğrafi veriler (GeoJSON dahil) için bir kapsayıcı sağlar. Verileriniz, Maps JavaScript API uygulamanızla aynı alanda barındırılan bir dosyada bulunuyorsa bu dosyayı map.data.loadGeoJson() yöntemini kullanarak yükleyebilirsiniz. Dosya aynı alan adında olmalıdır, ancak dosyayı farklı bir alt alanda barındırabilirsiniz. Örneğin, www.example.com adresinden files.example.com için istekte bulunabilirsiniz.

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

Alanlar arasında veri yükleme

Alanın yapılandırması böyle bir isteğe izin veriyorsa kendi alanınız dışındaki bir alandan da veri isteyebilirsiniz. Bu iznin standardı, Kaynaklar arası kaynak paylaşımı (CORS) olarak adlandırılır. Bir alan, alanlar arası isteklere izin verdiyse yanıt başlığında aşağıdaki bildirim bulunmalıdır:

Access-Control-Allow-Origin: *

Bir alan adının CORS'yi etkinleştirip etkinleştirmediğini öğrenmek için Chrome Geliştirici Araçları'nı (DevTools) kullanın.

Bu tür bir alandan veri yüklemek, JSON'u aynı alandan yüklemekle aynıdır:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

JSONP isteğinde bulunma

Bu tekniğin kullanılabilmesi için hedef alanın JSONP isteklerini desteklemesi gerekir.

JSONP isteğinde bulunmak için createElement() kullanarak dokümanınızın başına script etiketi ekleyin.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Komut dosyası çalıştığında, hedef alan, verileri genellikle callback() adlı başka bir komut dosyasına bağımsız değişken olarak aktarır. Hedef alan, geri çağırma komut dosyası adını tanımlar. Bu ad, hedef URL'yi bir tarayıcıda yüklediğinizde sayfadaki ilk addır.

Örneğin, geri çağırma adının eqfeed_callback olarak gösterilmesi için tarayıcı pencerenize http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp dosyasını yükleyin.

Geri çağırma komut dosyasını kodunuzda tanımlamanız gerekir:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Ayrıştırılan GeoJSON verilerini haritaya yerleştirmek için addGeoJson() yöntemini kullanın.

Verilerin stilini belirleme

GeoJSON verilerini bir Harita nesnesine ekleyerek verilerinizin görünümünü değiştirebilirsiniz. Verilerinizin stilini belirleme hakkında daha fazla bilgi için geliştirici kılavuzunu okuyun.

Daha fazla bilgi

  • GeoJSON, coğrafi verileri kodlamak için JSON'u (JavaScript Object Notation - JavaScript Object Notation) temel alan, yaygın olarak kullanılan bir açık biçimdir. JSON verileri için tasarlanmış JavaScript araçları ve yöntemleri GeoJSON ile de çalışır. Daha fazla bilgi için geliştirici kılavuzunu okuyun.
  • JSONP, doldurulmuş JSON anlamına gelir. Web tarayıcılarında çalışan JavaScript programlarında, farklı bir alandaki bir sunucudan veri istemek için kullanılan bir iletişim yöntemidir.