Şekiller

Platform seçin: Android iOS JavaScript

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

Çoklu çizgiler

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

Çoklu çizgi ekle

Polyline oluşturucu, çoklu çizginin görsel davranışını ayarlamak için çizginin LatLng koordinatlarını ve bir stil grubunu belirten bir PolylineOptions kümesi alır.

Polyline nesne, 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 belirtebilir veya bu özellikleri yapım aşamasından sonra 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 desteklemez.
• 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.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Çoklu çizgiyi kaldırma

Bir çoklu çizgiyi haritadan kaldırmak için bağımsız değişken olarak null geçiren 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 çizgi haritadan kaldırılır. Bunun yerine, çoklu çizgiyi silmek isterseniz haritadan kaldırmanız ve ardından çoklu çizginin kendisini null olarak ayarlamanız gerekir.

Çoklu çizgiyi inceleme

Bir çoklu çizgi, LatLng nesne dizisi olarak bir koordinat dizisini 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 sonucunu döndürür.
• insertAt(), belirli bir sıfır tabanlı dizin değerine geçirilen bir LatLng ekler. Bu dizin değerindeki mevcut tüm koordinatların ileriye taşınacağını unutmayın.
• removeAt(), belirli bir sıfır tabanlı dizin değerindeki bir LatLng öğesini kaldırır.

Not: mvcArray[i] söz dizimini kullanarak bir dizinin i. öğesini alamazsınız. mvcArray.getAt(i) kullanmanız gerekir.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Çoklu çizgiyi özelleştirme

Vektör tabanlı görüntüleri bir çoklu çizgiye simge biçiminde ekleyebilirsiniz. Semboller ve PolylineOptions sınıfının birleşimi sayesinde, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde geniş bir kontrole sahip olursunuz. arrows, kesikli çizgiler, özel simgeler ve animasyonlu simgeler hakkında bilgi edinmek için Simgeler bölümünü inceleyin.

Poligonlar

Poligon, bir dizi koordinatla tanımlanan ve kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri, sıralı bir dizi koordinattan oluşmasıyla 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, kapsanan alan için de özel renkler ve opaklıklar (dolgu) tanımlayabilirsiniz. Renkler, onaltılık HTML biçiminde belirtilmelidir. Renk adları desteklenmiyor.

Polygon nesneleri, aşağıdakiler gibi karmaşık şekilleri açıklayabilir:

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

Karmaşık bir şekil tanımlamak için, birden çok yolu olan bir çokgen kullanırsınız.

Not: Veri katmanı, poligon çizmek için basit bir yol sunar. Poligon sarma işlemini sizin için yapar, böylece delikli poligon çizmeyi kolaylaştırır. Veri katmanı ile ilgili belgelere bakın.

Poligon ekle

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

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

Not: Bu şekilde basit bir poligon oluşturursanız yolu MVCArray olarak değiştirerek poligondan değerler almanız gerekir.

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.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

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ığından, döngüyü tamamlar. Ancak pratikte, poligonlar kapalı alanları tanımladığından, son koordinat kümesini belirtmeniz gerekmez. Maps JavaScript API, herhangi bir yolda son konumu ilk konuma tekrar bağlayan bir çizgi çizerek poligonu otomatik olarak tamamlar.

Aşağıdaki örnek, son LatLng atlanması dışında öncekiyle aynıdır: örneği göster.

Çokgen 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 çokgeni silmediğini unutmayın. Poligon haritadan kaldırılır. Bunun yerine poligonu silmek isterseniz haritadan kaldırmanız ve ardından poligonun kendisini null olarak ayarlamanız gerekir.

Bir poligonu kaldırmak, çoklu çizgiyi kaldırmaya benzer. Bir çoklu çizgi için kodu çalışırken görmek için: örneği inceleyin.

Çokgeni inceleme

Bir poligon, koordinat dizisini bir dizi dizisi olarak belirtir. Her bir dizi, MVCArray türündedir. Her "yaprak" dizisi, tek bir yol 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ştirip incelemeniz gerekir:

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

Not: mvcArray[i] söz dizimini kullanarak bir dizinin i. öğesini alamazsınız. mvcArray.getAt(i) kullanmanız gerekir.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Çokgende delik açma

Bir 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ın, dış yolu tanımlayan koordinatların tersi olması gerekir. Ö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 düzenler. Böylece delikli poligonlar çizmeniz kolaylaşır. Veri katmanı ile ilgili belgelere bakın.

Aşağıdaki örnekte, iç yolu dış yolun zıt yönünde yaralanmış, iki yolu olan bir poligon çizilmiştir.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Dikdörtgenler

Google Haritalar JavaScript API'si, genel bir Polygon sınıfına ek olarak, Rectangle nesnelerinin yapısını basitleştirmek amacıyla özel bir sınıfı da içerir.

Dikdörtgen ekleyin

Rectangle, dikdörtgenin kenarı (fırça) için özel renkler, ağırlıklar ve opaklıklar, dikdörtgen içindeki alan (dolgu) için de özel renkler ve opaklıklar tanımlayabilmeniz açısından Polygon ile benzerdir. Renkler, on altılı sayısal HTML stilinde belirtilmelidir.

Polygon öğesinin aksine, Rectangle için paths tanımlamazsınız. Bunun yerine, dikdörtgenin şeklini google.maps.LatLngBounds belirterek tanımlayan bir bounds özelliği vardır.

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.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Aşağıdaki kod, kullanıcı haritada yakınlaştırma oranını her değiştirdiğinde bir dikdörtgen oluşturur. Dikdörtgenin boyutu görüntü alanı tarafından 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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Dikdörtgeni kaldırma

Haritadan bir dikdörtgeni kaldırmak için bağımsız değişken olarak null geçiren 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 silmek isterseniz haritadan kaldırmanız ve ardından dikdörtgenin kendisini null olarak ayarlamanız gerekir.

Dikdörtgeni kaldırmak çoklu çizgiyi kaldırmaya benzer. Bir çoklu çizgi için kodu çalışırken görmek için: örneği inceleyin.

Daireler

Google Maps JavaScript API, genel Polygon sınıfına ek olarak Circle nesnelerinin yapısını basitleştirmek amacıyla özel bir sınıf içerir.

Çevre ekleme

Circle, dairenin kenarı (fırça) için özel renkler, ağırlıklar ve opaklıkların yanı sıra daire içindeki alan (dolgu) için özel renkler ve opaklıklar tanımlayabilmeniz açısından Polygon ile benzerdir. Renkler, on altılı sayısal HTML stilinde belirtilmelidir.

Polygon öğesinin aksine, Circle için paths tanımlamazsınız. Bunun yerine, bir dairenin şeklini tanımlayan iki ek özellik vardır:

• center, dairenin merkezinin google.maps.LatLng değerini belirtir.
• radius, çemberin 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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Çevre kaldırma

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

circle.setMap(null);

Yukarıdaki yöntemin çevreyi silmediğini unutmayın. Daireyi haritadan kaldırır. Çevreyi silmek yerine silmek isterseniz, haritadan kaldırmanız ve ardından dairenin kendisini null olarak ayarlamanız gerekir.

Bir daireyi kaldırmak, çoklu çizgiyi kaldırmaya benzer. Bir çoklu çizgi için kodu çalışırken görmek için: örneği inceleyin.

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 tutamaçları doğrudan harita üzerinde yeniden konumlandırmak, yeniden şekillendirmek ve yeniden boyutlandırmak için kullanabilirler. Ayrıca bir şekli sürüklenebilir hale getirerek kullanıcıların haritada farklı bir yere taşımasını sağlayabilirsiniz.

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 alıp depolamanız gerekir.

Şekli düzenlenebilir hale getirme

Herhangi bir şekil (çoklu çizgiler, poligonlar, daireler ve dikdörtgenler), şeklin seçeneklerinde editable öğesi true olarak ayarlanarak 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örüntüleyin

Şekli sürüklenebilir yapma

Varsayılan olarak, haritada çizilen bir şekil konuma sabitlenir. Kullanıcıların bir şekli haritadaki farklı bir konuma sürüklemesine izin vermek için şekil seçeneklerinde draggable değerini 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ükleme özelliğini etkinleştirirken, geodesic özelliğini true şeklinde ayarlayarak poligonu ya da çoklu çizginin jeodezik yapmayı da düşünmeniz gerekir.

Jeodezik bir poligon taşınırken gerçek coğrafi şeklini korur ve Mercator projeksiyonunda kuzeye veya güneye taşınırken çokgenin bozuk görünmesine neden olur. Jeodezik olmayan poligonların ekrandaki ilk görünümleri her zaman korunur.

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

Koordinat sistemleri hakkında daha fazla bilgi için harita ve koordinatlar hakkındaki kılavuzu inceleyin.

Aşağıdaki haritada yaklaşık olarak aynı büyüklük 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 görüntüleyin

Düzenleme etkinliklerini dinleyin

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

Şekil	Etkinlikler
Daire	radius_changed center_changed
Poligon	insert_at remove_at set_at İşleyici, poligonun yoluna ayarlanmalıdır. Poligonun birden fazla yolu varsa her yol için bir işleyici ayarlanmalıdır.
Çoklu çizgi	insert_at remove_at set_at İşleyici, çoklu çizginin yoluna 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.');
});

Düzenleme etkinliğinin dikdörtgen üzerinde nasıl ele alındığıyla ilgili bir örneği inceleyin: Örneği göster.

Sürükleme etkinliklerini dinleme

Bir şekil sürüklendiğinde, sürükleme işleminin yanı sıra sürükleme sırasında da etkinlikler tetiklenir. Çoklu çizgiler, poligonlar, daireler ve dikdörtgenler için aşağıdaki etkinlikler 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 işleme hakkında daha fazla bilgi için etkinlikler hakkındaki belgelere bakın.