Şekiller ve çizgiler

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, harita üzerinde bir enlem/boylam koordinatına bağlı olan nesnedir. Şu şekiller kullanılabilir: çizgiler, poligonlar, daireler ve dikdörtgenler. Şekillerinizi kullanıcıların düzenleyebileceği veya sürükleyebileceği şekilde de yapılandırabilirsiniz.

Çoklu çizgiler

Haritanıza bir çizgi çizmek için çoklu çizgi kullanın. Polyline sınıfı, harita üzerindeki bağlı çizgi segmentlerinin doğrusal bindirmesini tanımlar. Polyline nesnesi, LatLng konum dizisinden oluşur ve bu konumları sıralı bir şekilde birbirine bağlayan bir dizi çizgi segmenti oluşturur.

Çoklu çizgi ekleme

Polyline oluşturucu, çizginin LatLng koordinatlarını ve çoklu çizginin görsel davranışını ayarlamak için bir dizi stili belirten bir PolylineOptions grubu alır.

Polyline nesneleri, harita üzerinde bir dizi düz segment olarak çizilir. Çizginizi oluştururken PolylineOptions içindeki çizginin çizgisi için özel renkler, ağırlıklar ve opaklıklar belirleyebilir veya bu özellikleri yapım sonrasında değiştirebilirsiniz. Çoklu çizgi aşağıdaki çizgi stillerini destekler:

• strokeColor, "#FFFFFF" biçiminde on altılı HTML rengini belirtir. Polyline sınıfı, adlandırılmış renkleri desteklemiyor.
• strokeOpacity, çizginin renginin opaklığını belirlemek için 0.0 ile 1.0 arasında sayısal bir değer belirtir. Varsayılan değer: 1.0.
• strokeWeight, çizginin genişliğini piksel cinsinden belirtir.

Çoklu çizginin editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini kullanıcıların satırı sürüklemesine izin verecek şekilde ayarlayabilirsiniz.

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

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

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js

Çoklu çizgiyi kaldırma

Bir çoklu çizgiyi haritadan kaldırmak için, bağımsız değişken olarak null ileten setMap() yöntemini çağırın. Aşağıdaki örnekte flightPath bir çoklu çizgi nesnesidir:

flightPath.setMap(null);

Yukarıdaki yöntemin çoklu çizgiyi silmediğini unutmayın. Çoklu çizgiyi haritadan kaldırır. Bunun yerine çoklu çizgiyi silmek isterseniz bunu haritadan kaldırıp çoklu çizgiyi null olarak ayarlamanız gerekir.

Çoklu çizgiyi inceleme

Çoklu çizgi, bir koordinat dizisini LatLng nesne dizisi olarak belirtir. Bu koordinatlar çizginin yolunu belirler. Koordinatları almak için getPath() yöntemini çağırın. Bu çağrı, MVCArray türünde bir dizi döndürür. Aşağıdaki işlemleri kullanarak diziyi değiştirebilir ve inceleyebilirsiniz:

• getAt(), belirli bir sıfır tabanlı dizin değerinde LatLng değerini döndürür.
• insertAt(), belirtilen sıfır tabanlı dizin değerine geçirilen bir LatLng ekler. Bu dizin değerindeki mevcut koordinatların ileriye taşınacağını unutmayın.
• removeAt(), belirtilen sıfır tabanlı dizin değerindeki bir LatLng değerini kaldırır.

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

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

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js

Çoklu çizgiyi özelleştirin

Vektör tabanlı görüntüleri bir çoklu çizgiye semboller biçiminde ekleyebilirsiniz. Semboller ve PolylineOptions sınıfının birlikte kullanılması sayesinde, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde daha fazla kontrol sahibi olursunuz. arrows, kesikli çizgiler, özel simgeler ve animasyonlu simgeler hakkında bilgi edinmek için Simgeler bölümüne bakın.

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri, sıralanmış bir dizi koordinattan oluşması açısından Polyline nesnelerine benzer. Poligonlar bir çizgi ve dolgu ile çizilir. Çokgenin kenarı (fırça) için özel renkler, ağırlıklar ve opaklıklar; kapalı alan (dolgu) için de özel renkler, opaklıklar tanımlayabilirsiniz. Renkler, onaltılık HTML biçiminde belirtilmelidir. Renk adları desteklenmiyor.

Polygon nesneleri, aşağıdakiler de dahil olmak üzere karmaşık şekilleri açıklayabilir:

• Tek bir poligonla tanımlanmış bitişik olmayan birden çok alan.
• Delik bulunan alanlar.
• Bir veya daha fazla alanın kesişimleri.

Karmaşık bir şekli tanımlamak için birden çok yolu olan bir poligon kullanırsınız.

Not: Veri katmanı, poligon çizmek için basit bir yol sağlar. Poligon sarmalamanızı sizin yerinize hallederek delikli poligon çizmeyi kolaylaştırır. Veri katmanıyla ilgili belgeleri inceleyin.

Poligon ekle

Poligonal alan birkaç ayrı yol içerebileceğinden Polygon nesnesinin paths özelliği, her biri MVCArray türünde bir dizi dizisi belirtir. Her dizi, sıralı LatLng koordinatlarından oluşan ayrı bir dizi tanımlar.

Yalnızca tek bir yoldan oluşan basit poligonlar için tek bir LatLng koordinat dizisini kullanarak Polygon oluşturabilirsiniz. Maps JavaScript API, basit diziyi paths özelliğinde depolarken, yapım sonrasında bir dizi dizisine dönüştürür. API, tek yoldan oluşan poligonlar için basit bir getPath() yöntemi sağlar.

Poligonun editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini kullanıcıların şekli sürüklemesine izin verecek şekilde ayarlayabilirsiniz.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

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

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Poligon otomatik tamamlama

Yukarıdaki örnekte yer alan Polygon, dört LatLng koordinat grubundan oluşur ancak ilk ve son grupların aynı konumu tanımlayarak döngüyü tamamladığına dikkat edin. Ancak pratikte, poligonlar kapalı alanları tanımladığından, son koordinat grubunu belirtmeniz gerekmez. Maps JavaScript API, herhangi bir yol için son konumu tekrar ilk konuma bağlayan bir çizgi çizerek poligonu otomatik olarak tamamlar.

Aşağıdaki örnek, son LatLng hariç olmak üzere öncekiyle aynıdır: örneği görüntüleyin.

Poligon kaldırma

Bir poligonu haritadan kaldırmak için bağımsız değişken olarak null ileten setMap() yöntemini çağırın. Aşağıdaki örnekte bermudaTriangle bir poligon nesnesidir:

bermudaTriangle.setMap(null);

Yukarıdaki yöntemin poligonu silmediğini unutmayın. Poligonu haritadan kaldırır. Bunun yerine poligonu silmek isterseniz haritadan kaldırıp poligonu null olarak ayarlamanız gerekir.

Poligonu inceleme

Poligon, koordinat serisini bir dizi dizisi olarak belirtir. Burada her dizi MVCArray türündedir. Her "yaprak" dizisi, tek bir yolu belirten LatLng koordinat dizisidir. Bu koordinatları almak için Polygon nesnesinin getPaths() yöntemini çağırın. Dizi bir MVCArray olduğundan aşağıdaki işlemleri kullanarak diziyi değiştirmeniz ve incelemeniz gerekir:

• getAt(), belirli bir sıfır tabanlı dizin değerinde LatLng değerini döndürür.
• insertAt(), belirtilen sıfır tabanlı dizin değerine geçirilen bir LatLng ekler. Bu dizin değerindeki mevcut koordinatların ileriye taşındığını unutmayın.
• removeAt(), belirtilen sıfır tabanlı dizin değerindeki bir LatLng değerini kaldırır.

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

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

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Poligonda delik açma

Poligon içinde boş bir alan oluşturmak için biri diğerinin içinde olmak üzere iki yol oluşturmanız gerekir. Deliği oluşturmak için iç yolu tanımlayan koordinatlar, dış yolu tanımlayanların tersi sırada olmalıdır. Örneğin, dış yolun koordinatları saat yönünde ise iç yol saat yönünün tersine olmalıdır.

Not: Veri katmanı, iç ve dış yolların sırasını sizin yerinize yöneterek delikli poligon çizmeyi kolaylaştırır. Veri katmanıyla ilgili belgeleri inceleyin.

Aşağıdaki örnekte iki yolu olan bir poligon çizilmiştir. İç yol, dış yolun ters yönünde sarılmıştır.

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

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

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Dikdörtgenler

Google Maps JavaScript API, genel bir Polygon sınıfına ek olarak Rectangle nesnelerinin oluşturulmasını kolaylaştırmak amacıyla bu nesneler için özel bir sınıf içerir.

Dikdörtgen ekleyin

Rectangle, dikdörtgenin kenarları (fırça) için özel renkler, ağırlıklar ve opaklıklar; dikdörtgen içindeki alan (dolgu) için özel renkler ve opaklıklar tanımlayabilmeniz açısından Polygon özelliğine benzer. Renkler, onaltılık sayısal HTML stiliyle belirtilmelidir.

Polygon öğesinden farklı olarak, Rectangle için paths tanımlamazsınız. Bunun yerine, dikdörtgen için google.maps.LatLngBounds değerini belirterek şeklini tanımlayan bir bounds özelliği bulunur.

Dikdörtgenin editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini kullanıcıların dikdörtgeni sürüklemesine izin verecek şekilde ayarlayabilirsiniz.

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

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

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js

Aşağıdaki kod, kullanıcı haritadaki yakınlaştırma ayarını her değiştirdiğinde bir dikdörtgen oluşturur. Dikdörtgenin boyutunu görüntü alanı belirler.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

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

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js

Dikdörtgeni kaldırma

Bir dikdörtgeni haritadan kaldırmak için bağımsız değişken olarak null ileten setMap() yöntemini çağırın.

rectangle.setMap(null);

Yukarıdaki yöntemin dikdörtgeni silmediğini unutmayın. Dikdörtgeni haritadan kaldırır. Dikdörtgeni silmek yerine bunu haritadan kaldırıp null olarak ayarlamalısınız.

Daireler

Genel Polygon sınıfına ek olarak Google Maps JavaScript API, Circle nesnelerinin oluşturulmasını kolaylaştırmak amacıyla bu nesneler için özel bir sınıf içerir.

Çevre ekleyin

Circle, dairenin kenarı (fırça) için özel renkler, ağırlıklar ve opaklıkların yanı sıra dairenin içindeki alan (dolgu) için özel renkler ve opaklıklar tanımlayabilmeniz açısından Polygon özelliğine benzer. Renkler, onaltılık sayısal HTML stiliyle belirtilmelidir.

Polygon öğesinden farklı olarak, Circle için paths tanımlamazsınız. Bunun yerine, dairenin şeklini tanımlayan iki ek özelliği vardır:

• center, dairenin merkezinin google.maps.LatLng değerini belirtir.
• radius, dairenin yarıçapını metre cinsinden belirtir.

Çevrenin editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini kullanıcıların çevreyi sürüklemesine izin verecek şekilde ayarlayabilirsiniz.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

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

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js

Çevre kaldırma

Bir daireyi haritadan kaldırmak için bağımsız değişken olarak null değerini ileten setMap() yöntemini çağırın.

circle.setMap(null);

Yukarıdaki yöntemin çevreyi silmediğini unutmayın. Daireyi haritadan kaldırır. Bunun yerine çevreyi silmek istiyorsanız çevreyi haritadan kaldırıp null olarak ayarlamanız gerekir.

Kullanıcı tarafından düzenlenebilir ve sürüklenebilir şekiller

Bir şekli düzenlenebilir hale getirmek, şekle tutma yerleri ekler. Kullanıcılar bu tutma yerlerini kullanarak şekli doğrudan harita üzerinde yeniden konumlandırabilir, yeniden şekillendirebilir ve yeniden boyutlandırabilir. Ayrıca, bir şekli sürüklenebilir hale getirebilirsiniz. Böylece, kullanıcılar bu şekli harita üzerinde farklı bir yere taşıyabilir.

Nesnede kullanıcı tarafından yapılan değişiklikler oturumlar arasında kalıcı olmaz. Kullanıcının düzenlemelerini kaydetmek istiyorsanız bilgileri kendiniz yakalayıp depolamanız gerekir.

Şekli düzenlenebilir hale getirme

Şekil seçeneklerinde editable politikası true olarak ayarlanarak herhangi bir şekil (çoklu çizgiler, poligonlar, daireler ve dikdörtgenler) kullanıcı tarafından düzenlenebilir olarak ayarlanabilir.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Örneği inceleyin

Şekli sürüklenebilir yapma

Varsayılan olarak, haritada çizilen bir şeklin konumu sabitlenir. Kullanıcıların bir şekli haritada farklı bir konuma sürüklemesine izin vermek için şekil seçeneklerinde draggable öğesini true olarak ayarlayın.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Bir poligon veya çoklu çizgi üzerinde sürüklemeyi etkinleştirirken, geodesic özelliğini true olarak ayarlayarak poligon veya çoklu çizgi jeodezini oluşturmayı da değerlendirmelisiniz.

Jeodezik bir poligon hareket ettirildiğinde gerçek coğrafi şeklini korur ve bu durum, Merkatör projeksiyonunda kuzeye ya da güneye doğru hareket ederken poligonun bozuk görünmesine neden olur. Jeodezik olmayan poligonlar ekrandaki ilk görünümlerini her zaman korur.

Jeodezik bir çoklu çizgide, Merkatör projeksiyonunda düz çizgilerin aksine, Dünya'nın küre olduğu varsayılarak çoklu çizginin segmentleri, Dünya yüzeyindeki iki nokta arasındaki en kısa yol olarak çizilir.

Koordinat sistemleri hakkında daha fazla bilgi için harita ve parça koordinatları rehberine bakın.

Aşağıdaki haritada, aşağı yukarı aynı boyut ve boyutlara sahip iki üçgen gösterilmektedir. Kırmızı üçgenin geodesic özelliği true olarak ayarlanmıştır. Kuzeye doğru hareket ettikçe şeklinin nasıl değiştiğine dikkat edin.

Örneği inceleyin

Düzenleme etkinliklerini dinleme

Bir şekil düzenlendiğinde düzenleme tamamlandıktan sonra bir etkinlik tetiklenir. Bu etkinlikler aşağıda listelenmiştir.

Bazı faydalı kod snippet'leri:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Dikdörtgen üzerinde düzenleme etkinliğini işlemeyle ilgili bir örneği inceleyin: örneği görüntüleyin.

Etkinlikleri sürüklemeyi dinleyin

Bir şekil sürüklendiğinde etkinlikler, sürükleme işleminin başlangıcı ve bitişinin yanı sıra sürükleme sırasında da tetiklenir. Çoklu çizgiler, poligonlar, daireler ve dikdörtgenler için aşağıdaki etkinlikler tetiklenir.

Etkinlikleri işleme hakkında daha fazla bilgi için etkinliklerle ilgili dokümanlara bakın.