React uygulamasına Google Haritası ekleme

1. Başlamadan önce

Bu codelab'de, Google Haritalar JavaScript API için vis.gl/react-google-map kitaplığını kullanmaya başlamak için ihtiyacınız olan her şeyi öğreneceksiniz. Bu kitaplık, React uygulamasına Google Haritası eklemenize olanak tanır. Kurulum yapmayı, Maps JavaScript API'yi yüklemeyi, ilk haritanızı görüntülemeyi, işaretçiler ve işaretçi kümeleme ile çalışmayı, harita üzerinde çizim yapmayı ve kullanıcı etkileşimini yönetmeyi öğreneceksiniz.

Ön koşullar

  • JavaScript, HTML ve CSS hakkında temel bilgi

Öğrenecekleriniz

  • Google Haritalar Platformu için vis.gl/react-google-map kitaplığını kullanmaya başlama
  • Maps JavaScript API'nin bildirimli olarak nasıl yükleneceği.
  • React uygulamasında harita yükleme
  • İşaretçileri, özel işaretçileri ve işaretçi kümelemeyi kullanma
  • Kullanıcı etkileşimi sağlamak için Maps JavaScript API etkinlik sistemiyle çalışma
  • Haritayı dinamik olarak kontrol etme
  • Harita üzerinde çizim yapma

İhtiyacınız olanlar

  • Faturalandırmanın etkinleştirildiği bir Google Cloud Hesabı.
  • Maps JavaScript API'nin etkin olduğu bir Google Haritalar Platformu API anahtarı.
  • Bilgisayarınızda Node.js yüklü olmalıdır.
  • Seçtiğiniz bir metin düzenleyici veya IDE.
  • Google Maps JavaScript API için vis.gl/react-google-map kitaplığı.
  • googlemaps/markerclusterer kitaplığı

Google Haritalar Platformu'nu ayarlama

Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkinleştirildiği bir projeniz yoksa lütfen faturalandırma hesabı ve proje oluşturmak için Google Haritalar Platformu'nu Kullanmaya Başlama kılavuzuna bakın.

  1. Cloud Console'da proje açılır menüsünü tıklayın ve bu codelab için kullanmak istediğiniz projeyi seçin.

  1. Bu codelab için gereken Google Haritalar Platformu API'lerini ve SDK'larını Google Cloud Marketplace'te etkinleştirin. Bunun için bu videodaki veya bu dokümandaki adımları uygulayın.
  2. Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümandaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.

2. Hazırlanın

Başlangıç projesini indirin

Başlangıç projesi şablonunu ve çözüm kodunu indirmek için aşağıdaki adımları uygulayın:

  1. GitHub deposunu indirin veya çatallayın. Başlangıç projesi, /starter dizininde bulunur ve codelab'i tamamlamak için ihtiyacınız olan temel dosya yapısını içerir. Tüm çalışmalarınızı /starter/src dizininde yapıyorsunuz.
git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

Alternatif olarak, kaynak kodunu indirmek için bu düğmeyi tıklayın.

(Kodu Ver)

  1. /starter dizinine gidin ve npm'yi yükleyin. Bu komut, package.json dosyasında listelenen tüm gerekli bağımlılıkları yükler.
cd starter && npm install
  1. Hâlâ /starter dizinindeyken:
npm start

Başlangıç projesi, yerel olarak yazdığınız kodu derleyip çalıştıran Vite geliştirme sunucusunu kullanabilmeniz için ayarlanmıştır. Vite geliştirme sunucusu, kodda değişiklik yaptığınız her seferde uygulamanızı tarayıcıda otomatik olarak yeniden yükler. Derleme işleminin sonunda verilen bağlantıyı takip ederseniz "Hello, world!" (Merhaba dünya!) yazan bir web sayfası görürsünüz.

  1. Çözüm kodunun tamamını çalıştırmak istiyorsanız /solution dizinine gidin ve aynı kurulum adımlarını tamamlayın.

3. Maps JavaScript API'yi yükleme

Google Haritalar Platformu'nu web'de kullanmanın temelini Maps JavaScript API oluşturur. Bu API, harita, işaretçiler, çizim araçları ve Yerler gibi diğer Google Haritalar Platformu hizmetleri de dahil olmak üzere Google Haritalar Platformu'nun tüm özelliklerini kullanmak için bir JavaScript arayüzü sağlar.

Maps JavaScript API'yi React çerçevesiyle yüklemek için vis.gl/react-google-map kitaplığının bir parçası olan APIProvider bileşenini kullanmanız gerekir. Bu bileşen, uygulamanın herhangi bir düzeyine eklenebilir (genellikle üst kısımlarda bir yere) ve tüm alt bileşenleri değiştirilmeden oluşturur. Maps JavaScript API'nin yüklenmesini sağlamanın yanı sıra bu kitaplığın diğer bileşenleri ve kancaları için bağlam bilgileri ve işlevler de sunar. APIProvider, vis.gl/react-google-map kitaplığına dahil edildiğinden daha önce npm install komutunu çalıştırdığınızda yüklenmişti.

APIProvider bileşenini kullanmak için aşağıdaki adımları uygulayın:

  1. /src/app.tsx dosyasını açın. Bu dosya, bu codelab'deki tüm çalışmalarınızı yapacağınız yerdir.
  2. Dosyanın en üstünde, APIProvider sınıfını @vis.gl/react-google-maps kitaplığından içe aktarın:
import {APIProvider} from '@vis.gl/react-google-maps';
  1. App işlev tanımında, APIProvider bileşeninin apiKey parametresini önceki adımda oluşturulan API anahtarıyla, onLoad özelliğini ise bir konsol günlüğü mesajıyla ayarlayın:
<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

APIProvider bileşeni, Google Maps Platform API anahtarınız, API'nin hangi sürümünü yüklemek istediğiniz ve yüklemek istediğiniz Maps JavaScript API tarafından sağlanan ek kitaplıklar dahil olmak üzere Maps JavaScript API'yi yüklemeyle ilgili çeşitli seçenekleri belirten bir dizi özellik alır.

APIProvider işlevinin çalışması için gereken tek özellik Google Haritalar API anahtarıdır. onLoad özelliği ise gösterim amacıyla eklenmiştir. Daha fazla bilgi için <APIProvider> Bileşeni başlıklı makaleye bakın.

app.tsx dosyanız şu şekilde görünmelidir:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

Her şey başarılı olursa tarayıcı konsolunda console.log ifadesini görürsünüz. Maps JavaScript API yüklendiğine göre, bir sonraki adımda dinamik haritayı oluşturabilirsiniz.

4. Harita görüntüleme

İlk haritanızı gösterme zamanı!

Maps JavaScript API'nin en yaygın kullanılan kısmı, harita örnekleri oluşturmanıza ve bunları değiştirmenize olanak tanıyan sınıf olan google.maps.Map'dır. vis.gl/react-google-map kitaplığı, bu sınıfı Map bileşenine sarmalar. Öncelikle Map ve MapCameraChangedEvent sınıflarını içe aktarın.

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

Map bileşeni, harita için çeşitli farklı ayarları destekler. Bu codelab'de aşağıdaki ayarları kullanacaksınız:

  • defaultCenter, haritanın merkezinin enlemini ve boylamını ayarlar.
  • defaultZoom, haritanın ilk yakınlaştırma düzeyini ayarlar.
  • Bir harita görüntülemek için aşağıdaki kodu APIProvider etiketlerinin içine yerleştirerek haritayı Sidney, Avustralya'da ortalayın ve şehir merkezini göstermek için doğru yakınlaştırma düzeyi olan 13 yakınlaştırma düzeyini verin:
 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

Tarayıcınızda artık Sidney'in haritasını görmelisiniz:

761c8c51c6631174.png

Özetlemek gerekirse bu bölümde, <Map> bileşenini içeren bir harita gösterdiniz ve özelliklerle ilk durumunu ayarladınız. Kameranın değiştiği zamanı yakalamak için etkinlikleri de kullandınız.

app.tsx dosyanız şöyle görünür:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. Bulut tabanlı harita stili ekleme

Sidney haritanızdaki önemli yerleri işaretlemek için kullandığınız gelişmiş işaretçileri kullanmak için harita kimliği gerekir. Bulut tabanlı harita stilleri için de harita kimliği kullanılır.

Bulut tabanlı harita stilleri'ni kullanarak haritanızın stilini özelleştirebilirsiniz.

Harita kimliği oluşturma

Henüz ilişkili bir harita stiline sahip bir harita kimliği oluşturmadıysanız aşağıdaki adımları tamamlamak için Harita Kimlikleri kılavuzuna bakın:

  1. Harita kimliği oluşturun.
  2. Harita kimliğini harita stiliyle ilişkilendirin.

Oluşturduğunuz harita kimliğini kullanmak için <Map> bileşeninin mapId özelliğini ayarlayın:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

Seçtiğiniz stil haritada gösterilir.

6. Haritaya işaretçi ekleme

Geliştiriciler Maps JavaScript API ile birçok şey yapar ancak haritaya işaretçi yerleştirmek kesinlikle en popüler olanıdır. İşaretçiler, haritada belirli noktaları göstermenizi sağlar ve kullanıcı etkileşimini yönetmek için kullanılan yaygın bir kullanıcı arayüzü öğesidir. Google Haritalar'ı daha önce kullandıysanız muhtemelen şu şekilde görünen varsayılan işaretçiyi biliyorsunuzdur:

d9a6513b82a2f1e1.png

Haritaya işaretçi yerleştirmek için AdvancedMarker bileşenini kullanmak üzere aşağıdaki adımları uygulayın:

  1. Sidney bölgesindeki ilgi çekici yerleri temsil eden bir nesne listesi oluşturun, bu listeyi içe aktarma işlemlerinizin hemen altına, App tanımının dışına yerleştirin:
type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);
  1. <Pin> öğesiyle pinlerinizi özelleştirin:
<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
  1. Listenizi gelişmiş işaretçilerle oluşturmak için özel bir bileşen oluşturun ve bunu App tanımının altına yerleştirin:
const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};
  1. PoiMarkers bileşenini Map bileşeninin alt öğesi olarak ekleyin:
<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>
  1. Son olarak, içe aktarma işlemlerinize Pin ve AdvancedMarker ekleyin.
import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

Haritada özelleştirilmiş gelişmiş işaretçiler görmeniz gerekir:

98d12a994e12a2c1.png

7. İşaretçi kümelemeyi etkinleştirme

Çok sayıda işaretçi veya birbirine yakın işaretçi kullanırken işaretçilerin çakıştığı ya da çok kalabalık göründüğü bir sorunla karşılaşabilirsiniz. Bu durum, kötü bir kullanıcı deneyimine neden olur. Örneğin, son adımda işaretçileri oluşturduktan sonra şunları fark etmiş olabilirsiniz:

98d12a994e12a2c1.png

İşaretçi kümeleme tam da bu noktada devreye girer. İşaretçi kümeleme, yaygın olarak uygulanan bir diğer özelliktir. Bu özellik, yakındaki işaretçileri yakınlaştırma düzeyine bağlı olarak değişen tek bir simge hâlinde gruplandırır. Örneğin:

3da24a6b737fe499.png

İşaretçi kümeleme algoritması, haritanın görünür alanını bir tabloya böler ve ardından aynı hücredeki simgeleri kümelendirir. Neyse ki Google Maps Platform ekibi, tüm bu işlemleri sizin için otomatik olarak yapan MarkerClustererPlus adlı faydalı bir açık kaynak yardımcı program kitaplığı oluşturduğu için bu konuda endişelenmenize gerek yok. MarkerClustererPlus kitaplığının kaynağını GitHub'da görüntüleyebilirsiniz.

İşaretçi kümelemeyi etkinleştirmek için şu adımları uygulayın:

  1. app.tsx dosyasının en üstünde, kitaplık içe aktarmalarımızı ve desteklenen türlerimizi güncelleyip ekleyelim.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

Bu codelab'in şablon projesinde, MarkerClustererPlus yardımcı program kitaplığı package.json dosyasında belirtilen bağımlılıklara zaten dahil edilmiştir. Bu nedenle, bu codelab'in başında npm install komutunu çalıştırdığınızda kitaplığı zaten yüklemişsinizdir.

  1. MarkerClusterer ve PoiMarkers bileşenindeki destekleyici öğeler için değişkenler oluşturun.

MarkerClusterer başlatmak için haritanın bir örneğine ihtiyacınız vardır. Örneği useMap() kancasından alın:

const map = useMap();
  1. Bir durum değişkeninde depolanan işaretçilerin listesini oluşturun:
const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  1. Kümeleyiciyi referans olarak saklayın:
const clusterer = useRef<MarkerClusterer | null>(null);
  1. Ayrıca PoiMarkers bileşeninizde MarkerClusterer öğesinin bir örneğini oluşturun ve işaretçi kümelerinin gösterilmesini istediğiniz Map öğesinin örneğini iletin:
 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);
  1. İşaretçi listesi değiştiğinde kümeleyiciyi güncelleyen bir efekt oluşturun:
useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);
  1. Yeni işaretçiler için referans oluşturacak bir işlev oluşturun:
const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };
  1. Her işaretçi için referans oluşturmak üzere AdvancedMarker öğesinde bu yöntemi kullanın.
<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

Artık haritanızda işaretçi kümelerini görmeniz gerekir:

3da24a6b737fe499.png

Yakınlaştırma ve uzaklaştırma yaptığınızda MarkerClustererPlus, kümeleri sizin için otomatik olarak yeniden numaralandırır ve yeniden boyutlandırır. Ayrıca, yakınlaştırmak ve bu kümeye dahil edilen tüm işaretçileri görmek için herhangi bir işaretçi kümesi simgesini de tıklayabilirsiniz.

d5e75480e9abd3c7.png

Özetlemek gerekirse bu bölümde, açık kaynaklı MarkerClustererPlus yardımcı program kitaplığını içe aktardınız ve bunu, React durumu ve referansları yardımıyla önceki adımda oluşturduğunuz işaretçileri otomatik olarak kümeleyen bir MarkerClusterer örneği oluşturmak için kullandınız.

PoiMarkers bileşeniniz şu şekilde görünmelidir:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Ardından, kullanıcı etkileşimini nasıl ele alacağınızı öğrenirsiniz.

8. Kullanıcı etkileşimi ekleme

Artık Sidney'in en popüler turistik yerlerinden bazılarını gösteren harika görünümlü bir haritanız var. Bu bölümde, haritanızın kullanıcı deneyimini daha da iyileştirmek için Maps JavaScript API'nin etkinlik sistemiyle kullanıcı etkileşimlerinin işlenmesine yönelik bazı ek işlemler eklersiniz.

Maps JavaScript API, JavaScript etkinlik işleyicilerini kullanarak kodda çeşitli kullanıcı etkileşimlerini işlemenize olanak tanıyan kapsamlı bir etkinlik sistemi sağlar. Örneğin, kullanıcının haritayı ve işaretçileri tıklaması, harita görünümünü kaydırması, yakınlaştırma ve uzaklaştırma gibi etkileşimler için kod yürütmeyi tetikleyecek etkinlik dinleyicileri oluşturabilirsiniz.

İşaretçilerinize click dinleyici eklemek ve ardından haritayı programatik olarak kaydırarak tıklanan işaretçinin haritanın ortasında görünmesini sağlamak için aşağıdaki adımları uygulayın:

  1. click işleyici geri çağırması oluşturun.

PoiMarkers bileşeninde, React'in useCallback() ile bir click işleyicisi tanımlayın.

click etkinliği, bir kullanıcı bir işaretçiyi her tıkladığında veya işaretçiye her dokunduğunda tetiklenir ve tıklanan kullanıcı arayüzü öğesiyle ilgili bilgileri içeren bir etkinliği JSON nesnesi olarak döndürür. Haritanın kullanıcı deneyimini iyileştirmek için click etkinliğini işleyebilir ve tıklanan işaretçinin enlemini ve boylamını almak için LatLng nesnesini kullanabilirsiniz.

Enlem ve boylam bilgilerini aldıktan sonra, haritanın tıklanan işaretçiye göre sorunsuz şekilde yeniden ortalanması için bu bilgileri Map örneğinin yerleşik panTo() işlevine iletin. Bunun için etkinlik işleyicinin geri çağırma işlevine aşağıdakileri ekleyin:

const PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};
  1. click işleyicilerini işaretçilere atayın.

vis.gl/react-google-map kitaplığının AdvancedMarker öğeleri, tıklamaları işlemek için yararlı olan iki özelliği kullanıma sunar:

  • clickable: Doğruysa AdvancedMarker tıklanabilir ve gmp-click etkinliğini tetikler. Ayrıca erişilebilirlik amacıyla etkileşimli olur. Örneğin, ok tuşlarıyla klavye gezinmesine izin verir.
  • onClick: click etkinliği gerçekleştiğinde çağrılacak geri çağırma işlevi.
  1. Her işaretçiye bir click işleyici atamak için PoiMarkers oluşturmanızı güncelleyin:
return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );
  1. Tarayıcıya gidip işaretlerinizi tıklayın. Bir işaretçi tıklandığında haritanın otomatik olarak yeniden ortalandığını görürsünüz.

Özetlemek gerekirse bu bölümde, haritadaki tüm işaretçilere bir click işleyici atamak için React'in etkinlik sistemini kullandınız, tetiklenen click etkinliğinden işaretçinin enlemini ve boylamını aldınız ve bir işaretçi her tıklandığında haritayı yeniden ortalamak için bu bilgileri kullandınız.

Sadece bir adım kaldı. Ardından, Maps JavaScript API'nin çizim özellikleriyle haritanın kullanıcı deneyimini daha da iyileştirirsiniz.

9. Harita üzerinde çizin

Şimdiye kadar, popüler turistik yerler için işaretçiler gösteren ve kullanıcı etkileşimini yöneten bir Sidney haritası oluşturdunuz. Bu codelab'in son adımında, harita deneyiminize ek bir yararlı özellik eklemek için Maps JavaScript API'nin çizim özelliklerini kullanırsınız.

Bu haritanın, Sidney şehrini keşfetmek isteyen kullanıcılar tarafından kullanılacağını düşünün. Faydalı bir özellik, işaretçi tıklandığında etrafındaki yarıçapı görselleştirmektir. Bu sayede kullanıcı, tıklanan işaretçiye yürüme mesafesinde olan diğer yerleri görebilir.

Maps JavaScript API, haritada kare, poligon, çizgi ve daire gibi şekiller çizmek için bir dizi işlev içerir. vis.gl/react-google-map kitaplığı, bu özellikleri React'te kullanmanıza olanak tanır.

Ardından, bir işaretçi tıklandığında etrafında 800 metrelik (yaklaşık yarım mil) bir yarıçapı göstermek için bir daire oluşturursunuz.

Başlangıç deposu, circle öğesi için özel bir bileşen içerir. Bu bilgiyi src/components/circle.tsx dosyasında bulabilirsiniz.

Kullanıcıların harita üzerinde çizim yapmasına izin vermek için aşağıdaki adımları uygulayın:

  1. İçe aktarma işlemlerinizi, sağlanan Circle bileşenini içerecek şekilde güncelleyin.
import {Circle} from './components/circle'
  1. Çember merkezi için bir durum değişkeni oluşturun.

PoiMarkers bileşeninizde dairenizin merkezinin durumunu yakalayın. İlk durumu null olarak ayarlarsınız ve geçerli bir merkez konumu (ve yarıçapı) olmadığı sürece bir dairenin oluşturulmayacağı gerçeğinden yararlanırsınız.

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};
  1. Bir click etkinliği işlendiğinde daire merkezini güncelleyin.

Etkinlik nesnesinde bulunan konumla setCircleCenter işlevini çağırın:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

Maps JavaScript API'deki çizim işlevleri, çizilen bir nesnenin haritada nasıl görüneceği konusunda size çok çeşitli seçenekler sunar. Dairesel bir yarıçap oluşturmak için daire öğesinin özelliklerini (ör. renk ve kontur ağırlığı) ayarlayın. Dairenin merkezleneceği yer ve yarıçapı da bu özelliklere dahildir.

  1. Oluşturma işlemine bir daire ekleyin ve merkezi durum değişkeninize bağlayın. Oluşturma işleminiz aşağıdaki gibi görünmelidir:
return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

İşlem tamamlandı Tarayıcınıza gidip işaretçilerden birini tıklayın. Etrafında dairesel bir yarıçap oluşturulduğunu görürsünüz:

d243587f4a9ec4a6.png

10. Tebrikler

Google Maps Platformu için vis.gl/react-google-map kitaplığını kullanarak ilk web uygulamanızı oluşturdunuz. Bu kapsamda Maps JavaScript API'yi yükleme, harita yükleme, işaretçilerle çalışma, haritayı kontrol etme ve harita üzerinde çizim yapma, kullanıcı etkileşimi ekleme gibi işlemleri gerçekleştirdiniz.

Tamamlanmış kodu görüntülemek için /solutions dizinine bakın.

Daha fazla bilgi