Şekiller

Platform seçin: Android iOS JavaScript

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

Çoklu çizgiler

Haritanızda bir çizgi çizmek için çoklu çizgi kullanın. Polyline sınıfı, haritadaki bağlı çizgi segmentlerinin doğrusal bindirmesini tanımlar. Polyline nesnesi, bir LatLng konum dizisinden oluşur ve bu konumları sıralı bir dizide bağlayan bir dizi satır segmenti oluşturur.

Çoklu çizgi ekleme

Polyline kurucusu, çizginin LatLng koordinatlarını ve çoklu çizginin görsel davranışını düzenlemek için bir stil grubu belirten bir PolylineOptions grubu alır.

Polyline nesne, harita üzerinde bir dizi düz segment olarak çizilir. Çizginizi oluştururken PolylineOptions içindeki çizginin fırçası için özel renkler, ağırlıklar ve opaklıklar belirtebilir veya inşaattan sonra bu özellikleri değiştirebilirsiniz. Çoklu çizgi aşağıdaki fırça stillerini destekler:

  • strokeColor, "#FFFFFF" biçimindeki 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 bir sayısal değer belirtir. Varsayılan değer 1.0'dir.
  • 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.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Çoklu çizgiyi kaldırma

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

flightPath.setMap(null);

Yukarıdaki yöntemin çoklu çizgiyi silmediğini unutmayın. Çoklu çizgiyi haritadan kaldırır. Çoklu çizgiyi silmek istiyorsanız haritadan kaldırmanız ve sonra çoklu çizgiyi null olarak ayarlamanız gerekir.

Çoklu çizgiyi inceleme

Çoklu çizgi, bir dizi nesneyi LatLng nesne dizisi olarak belirtir. Bu koordinatlar, çizginin yolunu belirler. Koordinatları almak için MVCArray türünü içeren bir dizi döndüren getPath() çağrısı yapın. Diziyi aşağıdaki işlemleri kullanarak değiştirebilir ve inceleyebilirsiniz:

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

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Çoklu çizgiyi özelleştirme

Bir çoklu çizgiye simge biçiminde vektör tabanlı resimler ekleyebilirsiniz. Simgeler ve PolylineOptions sınıfının kombinasyonu sayesinde haritanızdaki çoklu çizgilerin görünümü ve etkisi büyük ölçüde kontrol edilir. Oklar, kesikli çizgiler, özel simgeler ve animasyon simgeleri hakkında bilgi için simgelere bakın.

Poligonlar

Poligon, koordinat dizisiyle tanımlanan kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri sıralı sırada bulunan bir dizi koordinattan oluşurlar. Bu nedenle Polyline nesnelere benzerler. Poligonlar çizgi ve dolguyla çizilir. Poligon kenarları (fırça) için özel renkler, ağırlıklar ve opaklıklar, kapalı alan (dolgu) için özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler, on altılı HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

Polygon nesneleri karmaşık işlevleri tanımlayabilir. Örneğin:

  • Tek bir poligon tarafından tanımlanan birden fazla bitişik olmayan alan.
  • Deliklerin bulunduğu alanlar.
  • Bir veya daha fazla alanın kesişimi.

Karmaşık bir şekil tanımlamak için birden fazla yola sahip bir poligon kullanıyorsunuz.

Not: Veri katmanı, poligonlar çizmenin basit bir yolunu sağlar. Poligon bobinlerini sizin için yönetir, deliklerin bulunduğu poligonların çizimini kolaylaştırır. Veri katmanıyla ilgili belgeleri inceleyin.

Poligon ekle

Poligon alanı birkaç farklı yol içerebileceği için Polygon nesnesinin paths özelliği, her biri MVCArray türünde bir dizi dizisini belirtir. Her dizi, sıralanmış LatLng koordinatlarından oluşan ayrı bir diziyi tanımlar.

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

Poligoneditable# ö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.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

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ımladığına ve bu döngünün tamamlandığı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 fırça çizerek poligonu otomatik olarak doldurur.

Son LatLng atlandığı sürece aşağıdaki örnek ö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 değerini ileten setMap() yöntemini çağırın. Aşağıdaki örnekte bermudaTriangle, poligon nesnedir:

bermudaTriangle.setMap(null);

Yukarıdaki yöntemin poligonu silmeyeceğini unutmayın. Poligonu haritadan kaldırır. Bunun yerine, poligonu silmek istiyorsanız haritadan kaldırmalı ve daha sonra poligonu null olarak ayarlamalısınız.

Poligon incelemesi

Poligon, koordinat dizisini bir dizi dizisi olarak belirtir. Burada her dizi, MVCArray türündedir. Her bir"yaprak"dizisi, tek bir yolu belirten LatLng koordinatlarından oluşan bir dizidir. Bu koordinatları almak için Polygon nesnesinin getPaths() yöntemini çağırın. Dizi 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 döndürür.
  • insertAt(), iletilen LatLng değerini belirli bir sıfır tabanlı dizin değerine ekler. Bu dizin değerindeki mevcut koordinatların ileriye dönük olarak taşındığını unutmayın.
  • removeAt(), sıfır tabanlı belirli bir dizin değerindeki LatLng değerini kaldırır.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Poligona delik açın

Poligon içinde boş alan oluşturmak için biri iç içe olacak şekilde iki yol oluşturmanız gerekir. Deliği oluşturmak için iç yolu tanımlayan koordinatlar, dış yolu tanımlayan koordinatların tersi sırada olmalıdır. Örneğin, dış yolun koordinatları saat yönündeyse iç yol saat yönünün tersine olmalıdır.

Not: Veri katmanı, iç ve dış yolların sırasını sizin için yönetir ve delikli çokgenlerin çizilmesini kolaylaştırır. Veri katmanıyla ilgili belgeleri inceleyin.

Aşağıdaki örnekte, iki yolu olan bir poligon çiziliyor. İç yönde, dış yoldaki ters yönde bulunan bir yol bulunuyor.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Dikdörtgenler

Google Haritalar JavaScript API, genel bir Polygon sınıfının yanı sıra yapısını kolaylaştırmak amacıyla Rectangle nesneleri için belirli bir sınıf içerir.

Dikdörtgen ekleyin

Rectangle, Polygon ile benzer özelliklere sahiptir. Dikdörtgenin kenarı için özel renkler, ağırlıklar ve opaklıklar, dikdörtgenin içinde kalan dolgu için özel renkler ve opaklıklar (dolgu) tanımlayabilirsiniz. Renkler, on altılık sayısal HTML stilinde belirtilmelidir.

Polygon işlevinin aksine, Rectangle için paths öğesini tanımlamazsınız. Bunun yerine, dikdörtgenin şeklini tanımlayan bir bounds özelliği vardır ve bu dikdörtgen için bir google.maps.LatLngBounds belirtilir.

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 bir şekilde, draggable özelliğini kullanıcıların dikdörtgeni sürüklemelerine izin verecek şekilde ayarlayabilirsiniz.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Aşağıdaki kod, kullanıcı haritada yakınlaştırmayı her değiştirdiğinde bir dikdörtgen oluşturur. Dikdörtgenin boyutu görüntü alanına göre belirlenir.

TypeScript

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

JavaScript

// 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;
Örneği göster

Örneği Dene

Dikdörtgen kaldırma

Bir dikdörtgeni haritadan kaldırmak için, bağımsız değişken olarak null değerini 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 istiyorsanız haritadan kaldırmanız ve dikdörtgenin kendisini null olarak ayarlamanız gerekir.

Daireler

Google Haritalar JavaScript API, genel Polygon sınıfının yanı sıra yapısını kolaylaştırmak amacıyla Circle nesneleri için belirli bir sınıf içerir.

Daire ekle

Circle, dairenin kenarı için özel renkler, ağırlıklar ve opaklıklar (fırça) ile dairenin içinde kalan alan için özel renkler ve opaklıklar (dolgu) tanımlayabilmeniz açısından Polygon özelliğine benzer. Renkler, on altılık sayısal HTML stilinde belirtilmelidir.

Polygon işlevinin aksine, Circle için paths öğesini tanımlamazsınız. Bunun yerine, bir 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.

Dairenin 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 daireyi sürüklemesine izin verecek şekilde ayarlayabilirsiniz.

TypeScript

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

JavaScript

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;
Örneği göster

Örneği Dene

Bir çevreyi 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 daireyi silmediğini unutmayın. Daireyi haritadan kaldırır. Bunun yerine, daireyi haritadan kaldırıp çevreyi null olarak ayarlamanız gerekir.

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

Şekli düzenlenebilir hale getirmek, kullanıcıların şekli doğrudan yeniden harita üzerinde konumlandırmak, yeniden şekillendirmek ve yeniden boyutlandırmak için kullanabileceği bir tutma yeri ekler. Ayrıca, bir şekli sürüklenebilir hale getirerek kullanıcıların haritayı farklı bir yere taşımasını sağlayabilirsiniz.

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

Bir şekli düzenlenebilir hale getirme

Şekil seçeneklerinde editable, true değerine ayarlanarak herhangi bir şekil (çoklu çizgi, poligon, daire ve dikdörtgen) 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 göster

Şekilleri sürüklenebilir yapma

Varsayılan olarak, haritada çizilen bir şekil 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
});

Poligon veya çoklu çizgi üzerinde sürüklemeyi etkinleştirirken geodesic özelliğini true olarak ayarlayarak poligon ya da çoklu çizgiyi ekleyebilirsiniz.

Jeodezik poligon, taşındığında gerçek coğrafi şeklini koruyacak ve Mercator projeksiyonunda kuzeye veya güneye taşınırken poligon bozuk görünecektir. Jeolojik olmayan poligonlar her zaman ekrandaki ilk görünümlerini korur.

Jeodezik çoklu çizgide, çizginin parçaları Dünya'nın iki noktası arasındaki en kısa yol olarak çizilir. Ancak Merkür'in projeksiyonundaki düz çizgiler yerine, dünyanın bir küre olduğu kabul edilir.

Koordinat sistemleri hakkında daha fazla bilgi için harita ve karo koordinatları kılavuzuna bakın.

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

Örneği göster

Etkinlikleri düzenleme

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

Şekil Etkinlikler
Daire radius_changed
center_changed
Çokgen insert_at
remove_at
set_at

Dinleyici çokgen yolunda ayarlanmalıdır. Poligon birden fazla yol içeriyorsa her yolda bir dinleyici ayarlanmalıdır.

Çoklu çizgi insert_at
remove_at
set_at

İşleyici, çoklu çizgi yolunda ayarlanmalıdır.

Dikdörtgen bounds_changed

Bazı yararlı 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 düzenleme etkinliğini ele alma örneğini inceleyin: örneği görüntüleyin.

Sürükleme etkinliklerini dinleme

Bir şekil sürüklendiğinde etkinlikler, sürükleme işleminin başında ve sonunda ve ayrıca sürükleme sırasında tetiklenir. Aşağıdaki etkinlikler poligon, poligon, daire ve dikdörtgen için tetiklenir.

Etkinlik Açıklama
dragstart Kullanıcı şekli sürüklemeye başladığında tetiklenir.
drag Kullanıcı şekli sürüklerken tekrar tekrar tetiklenir.
dragend Kullanıcı şekli sürüklemeyi bıraktığında tetiklenir.

Etkinlikleri yönetme hakkında daha fazla bilgi için etkinlikler hakkındaki dokümanlara bakın.