Vektör Harita Özellikleri

Platform seçin: Android iOS JavaScript

Örneği Görüntüle

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: raster ve vektör. Raster harita, haritayı piksel tabanlı raster resim karolarından oluşan bir ızgara olarak yükler. Bu karolar, Google Haritalar Platformu sunucu tarafında oluşturulur ve ardından web uygulamanıza sunulur. Vektör harita ise vektör tabanlı karolardan oluşur. Bu karolar, yükleme sırasında istemci tarafında WebGL kullanılarak çizilir. WebGL, tarayıcının 2D ve 3D grafikleri oluşturmak için kullanıcının cihazındaki GPU'ya erişmesine olanak tanıyan bir web teknolojisidir.

Vektör harita, kullanıcılarınızın aşina olduğu Google Haritası ile aynıdır ve varsayılan raster karo haritaya kıyasla birçok avantaj sunar. Bunların en önemlileri, vektör tabanlı görüntülerin keskinliği ve yakınlaştırma seviyelerinde 3D binaların eklenmesidir. Vektör harita şu özellikleri destekler:

• Programatik eğim ve yön kontrolü
• Gelişmiş kamera kontrolü
• Daha akıcı yakınlaştırma için kesirli yakınlaştırma

• 3D içerik ve animasyonlar

• div öğesi ve JavaScript kullanılarak yüklenen haritalar için varsayılan oluşturma türü google.maps.RenderingType.RASTER şeklindedir.

• gmp-map öğesi kullanılarak yüklenen haritalar için varsayılan oluşturma türü, eğim ve yön kontrolü etkinleştirilmiş google.maps.RenderingType.VECTOR'dir.

Vektör haritaları kullanmaya başlama

Yatırma ve döndürme

Haritayı başlatırken heading ve tilt özelliklerini ekleyerek ve haritada setTilt ve setHeading yöntemlerini çağırarak vektör haritada eğimi ve dönüşü (yön) ayarlayabilirsiniz. Aşağıdaki örnekte, eğimi ve yönü 20 derecelik artışlarla programatik olarak ayarlamayı gösteren bazı düğmeler haritaya eklenmektedir.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

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

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

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

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>

    <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 script 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

Fare ve klavye hareketlerini kullanma

Eğme ve döndürme (yön) kullanıcı etkileşimleri etkinleştirildiyse (programatik olarak veya Google Cloud Console'da) kullanıcılar, fare ve klavyeyi kullanarak eğme ve döndürme ayarlarını yapabilir:

• Fareyi kullanarak üst karakter tuşunu basılı tutun, ardından eğimi ayarlamak için fareyi yukarı ve aşağı, yönü ayarlamak için sağa ve sola sürükleyin.
• Klavyeyi kullanarak üst karakter tuşunu basılı tutun, ardından eğimi ayarlamak için yukarı ve aşağı ok tuşlarını, yönü ayarlamak için ise sağ ve sol ok tuşlarını kullanın.

Eğimi ve yönü programatik olarak ayarlama

Vektör haritada eğimi ve yönü programatik olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın. Yön, kameranın baktığı yöndür. Kuzeyden başlayarak saat yönünde derece cinsinden ölçülür. Bu nedenle, map.setHeading(90) değeri haritayı doğu yukarı bakacak şekilde döndürür. Eğim açısı zenitten ölçülür. Bu nedenle map.setTilt(0) doğrudan aşağıya bakarken map.setTilt(45) eğik bir görünüme neden olur.

• Haritanın eğim açısını ayarlamak için setTilt() yöntemini çağırın. Mevcut eğim değerini almak için getTilt() kullanın.
• Haritanın yönünü ayarlamak için setHeading() yöntemini çağırın. Mevcut yön değerini almak için getHeading() kullanın.

Eğimi ve yönü koruyarak harita merkezini değiştirmek için map.setCenter() veya map.panBy() tuşlarını kullanın.

Kullanılabilecek açı aralığının mevcut yakınlaştırma seviyesine göre değiştiğini unutmayın. Bu aralığın dışındaki değerler, izin verilen aralığa sabitlenir.

Yön, eğim, merkez ve yakınlaştırmayı programatik olarak değiştirmek için moveCamera yöntemini de kullanabilirsiniz. Daha fazla bilgi edinin.

Diğer yöntemler üzerindeki etkisi

Haritaya eğim veya döndürme uygulandığında diğer Maps JavaScript API yöntemlerinin davranışı etkilenir:

• map.getBounds() her zaman görünür bölgeyi içeren en küçük sınırlayıcı kutuyu döndürür. Eğme uygulandığında, döndürülen sınırlar haritanın görüntü alanının görünür bölgesinden daha büyük bir bölgeyi temsil edebilir.
• map.fitBounds(), sınırları sığdırmadan önce eğimi ve yönü sıfırlar.
• map.panToBounds(), sınırları kaydırmadan önce eğimi ve yönü sıfırlar.
• map.setTilt() her değeri kabul eder ancak maksimum eğimi mevcut harita yakınlaştırma seviyesine göre kısıtlar.
• map.setHeading() her değeri kabul eder ve değeri [0, 360] aralığına sığacak şekilde değiştirir.

Kamerayı denetleme

Kamera özelliklerinin herhangi bir kombinasyonunu tek seferde güncellemek için map.moveCamera() işlevini kullanın. map.moveCamera(), güncellenecek tüm kamera özelliklerini içeren tek bir parametre kabul eder. Aşağıdaki örnekte, center, zoom, heading ve tilt değerlerini tek seferde ayarlamak için map.moveCamera() yönteminin çağrılması gösterilmektedir:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Kamera özelliklerini, burada gösterildiği gibi bir animasyon döngüsüyle map.moveCamera() yöntemini çağırarak canlandırabilirsiniz:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Kamera konumu

Harita görünümü, düz bir düzleme bakan bir kamera olarak modellenir. Kameranın konumu (ve dolayısıyla haritanın oluşturulması) şu özelliklerle belirtilir: hedef (enlem/boylam konumu), kerteriz, eğim ve yakınlaştırma.

Hedef (konum)

Kamera hedefi, haritanın merkezinin konumudur ve enlem ve boylam koordinatları olarak belirtilir.

Enlem, -85 ile 85 derece arasında (bu değerler dahil) olabilir. Bu aralığın üstündeki veya altındaki değerler, bu aralıktaki en yakın değere sabitlenir. Örneğin, 100 enlem değeri belirtildiğinde değer 85 olarak ayarlanır. Boylam, -180 ile 180 derece arasındadır (bu değerler dahil). Bu aralığın üstünde veya altında olan değerler, (-180, 180) aralığına sığacak şekilde sarmalanır. Örneğin, 480, 840 ve 1200 değerlerinin tümü 120 dereceye sarmalanır.

Yön (oryantasyon)

Kamera yönü, haritanın üst kenarına karşılık gelen pusula yönünü gerçek kuzeyden derece cinsinden ölçer. Haritanın merkezinden haritanın üst kenarına dikey bir çizgi çizerseniz yön, kameranın gerçek kuzeye göre yönüne (derece cinsinden ölçülür) karşılık gelir.

0 yönü, haritanın üst kısmının gerçek kuzeyi gösterdiği anlamına gelir. 90 yön değeri, haritanın üst kısmının tam doğuyu (pusulada 90 derece) gösterdiği anlamına gelir. 180 değeri, haritanın üst kısmının güneyi gösterdiği anlamına gelir.

Maps API, haritanın yönünü değiştirmenize olanak tanır. Örneğin, araba kullanan bir kişi genellikle yol haritasını seyahat yönüne göre hizalarken harita ve pusula kullanan yürüyüşçüler genellikle haritayı dikey bir çizgi kuzeyi gösterecek şekilde yönlendirir.

Eğim (görüntüleme açısı)

Eğim, kameranın doğrudan haritanın merkez konumunun üzerindeki bir yay üzerindeki konumunu tanımlar. Bu konum, nadir (doğrudan kameranın altını gösteren yön) açısından derece cinsinden ölçülür. 0 değeri, kameranın doğrudan aşağı baktığı anlamına gelir. 0'dan büyük değerler, kameranın belirtilen derece kadar ufka doğru eğildiğini gösterir. Görüntüleme açısını değiştirdiğinizde harita, uzaktaki özellikler daha küçük, yakındaki özellikler daha büyük görünecek şekilde perspektif olarak gösterilir. Aşağıdaki resimlerde bu durum gösterilmektedir.

Aşağıdaki resimlerde görüntüleme açısı 0 derecedir. İlk resimde bunun şeması gösterilmektedir. 1 konumu kamera konumu, 2 konumu ise mevcut harita konumudur. Oluşturulan harita, istemin altında gösteriliyor.

Harita, kameranın varsayılan görüntüleme açısıyla gösterilir.

Kameranın varsayılan görüntüleme açısı.

Aşağıdaki resimlerde görüntüleme açısı 45 derecedir. Kameranın, tam tepeden (0 derece) yere (90 derece) doğru bir yayın yarısına kadar hareket ederek 3 konumuna geldiğini görebilirsiniz. Kamera hâlâ haritanın merkez noktasını gösteriyor ancak 4 konumundaki çizgiyle temsil edilen alan artık görünür durumda.

Harita 45 derecelik bir görüntüleme açısıyla gösterilir.

45 derecelik kamera görüntüleme açısı.

Bu ekran görüntüsündeki harita, orijinal haritayla aynı noktayı ortalamış olsa da haritanın üst kısmında daha fazla özellik gösteriliyor. Açıyı 45 derecenin üzerine çıkardığınızda, kamera ile harita konumu arasındaki özellikler orantılı olarak daha büyük görünürken harita konumunun ötesindeki özellikler orantılı olarak daha küçük görünür ve üç boyutlu bir efekt elde edilir.

Tarih aralığını

Kameranın yakınlaştırma seviyesi, haritanın ölçeğini belirler. Daha yüksek yakınlaştırma seviyelerinde ekranda daha fazla ayrıntı görülebilirken daha düşük yakınlaştırma seviyelerinde dünyanın daha büyük bir kısmı ekranda görülebilir.

Yakınlaştırma seviyesinin tam sayı olması gerekmez. Haritanın izin verdiği yakınlaştırma seviyeleri aralığı; hedef, harita türü ve ekran boyutu gibi çeşitli faktörlere bağlıdır. Aralık dışındaki tüm sayılar, en yakın geçerli değere dönüştürülür. Bu değer, minimum yakınlaştırma seviyesi veya maksimum yakınlaştırma seviyesi olabilir. Aşağıdaki listede, her yakınlaştırma seviyesinde görmeyi bekleyebileceğiniz yaklaşık ayrıntı düzeyi gösterilmektedir:

• 1: Dünya
• 5: Kara parçası/kıta
• 10: Şehir
• 15: Sokaklar
• 20: Binalar

Not: Ekran boyutu ve yoğunluğu nedeniyle bazı cihazlar en düşük yakınlaştırma seviyelerini desteklemeyebilir.

Aşağıdaki resimlerde farklı yakınlaştırma seviyelerinin görsel görünümü gösterilmektedir:

Yakınlaştırma seviyesi 5 olan bir harita.

15 yakınlaştırma seviyesinde bir harita.

Yakınlaştırma seviyesi 20 olan bir harita.

Kesirli Yakınlaştırma

Vektör haritalar, tam sayılar yerine kesirli değerler kullanarak yakınlaştırma yapmanıza olanak tanıyan kesirli yakınlaştırmayı destekler. Hem raster hem de vektör haritalar kesirli yakınlaştırmayı destekler ancak kesirli yakınlaştırma, vektör haritalar için varsayılan olarak açık, raster haritalar için varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı açıp kapatmak için isFractionalZoomEnabled harita seçeneğini kullanın.

Aşağıdaki örnekte, harita başlatılırken kesirli yakınlaştırmanın nasıl etkinleştirileceği gösterilmektedir:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

Kesirli yakınlaştırmayı, isFractionalZoomEnabled harita seçeneğini burada gösterildiği gibi ayarlayarak da açıp kapatabilirsiniz:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Kesirli yakınlaştırmanın etkin olup olmadığını algılamak için bir dinleyici ayarlayabilirsiniz. Bu, isFractionalZoomEnabled değerini açıkça true veya false olarak ayarlamadıysanız en kullanışlı yöntemdir. Aşağıdaki örnek kod, kesirli yakınlaştırmanın etkin olup olmadığını kontrol eder:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});

Dikkat: Kesirli yakınlaştırma etkinleştirildiğinde zoom_changed etkinliği daha sık tetiklenir. Bu işlem, zoom_changed öğesini izlemek için ayarlanmış tüm dinleyicileri etkiler. En iyi performans için yalnızca yakınlaştırma bir tam sayı değeri kadar değiştiğinde güncelleme yapın veya kısıtlama uygulayın.