Şekiller ve çizgiler

Platform seçin: Android iOS JavaScript

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, haritadaki bir nesnedir ve enlem/boylam koordinatına bağlıdır. Aşağıdaki ş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ıza çizgi çizmek için çoklu çizgi kullanın. Polyline sınıfı, haritada bağlı çizgi segmentlerinin doğrusal bir yer paylaşımını tanımlar. Polyline nesnesi, bir dizi LatLng konumdan oluşur ve bu konumları sıralı bir şekilde birbirine bağlayan bir dizi çizgi parçası oluşturur.

Çoklu çizgi ekleme

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

Polyline nesneleri, haritada bir dizi düz segment olarak çizilir. Çizginizi oluştururken PolylineOptions içinde çizginin konturu için özel renkler, kalınlıklar ve opaklıklar belirtebilir veya bu özellikleri oluşturma işleminden sonra değiştirebilirsiniz. Çoklu çizgi aşağıdaki kontur stillerini destekler:

  • strokeColor, "#FFFFFF" biçiminde on altılık bir HTML rengi 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 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üzenlenebilen şekiller bölümüne bakın. Benzer şekilde, kullanıcıların çizgiyi sürüklemesine izin vermek için draggable özelliğini ayarlayabilirsiniz.

Bu örnekte, Oakland, CA ile Brisbane, Avustralya arasında yapılan ilk trans-Pasifik uçuşunun rotasını gösteren iki piksellik kırmızı bir çoklu çizgi oluşturulur.

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

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
Örneği görüntüleyin

Örneği deneyin

Çoklu çizgi kaldırma

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

flightPath.setMap(null);

Yukarıdaki yöntemin çoklu çizgiyi silmediğini unutmayın. Bu işlem, çoklu çizgiyi haritadan kaldırır. Çoklu çizgiyi silmek istiyorsanız çoklu çizgiyi haritadan kaldırmanız ve ardından çoklu çizginin kendisini null olarak ayarlamanız gerekir.

Çoklu çizgi inceleme

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

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

Aşağıdaki örnekte, tıklamalara dayalı bir çoklu çizginin nasıl oluşturulacağı gösterilmektedir (köşe eklemek için haritayı tıklayın).

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

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
Örneği görüntüleyin

Örneği deneyin

Çoklu çizgiyi özelleştirme

Sembol şeklinde çoklu çizgiye vektör tabanlı resimler ekleyebilirsiniz. Semboller ve PolylineOptions sınıfının birleşimiyle, haritanızdaki çoklu çizgilerin görünümü ve yarattığı izlenim üzerinde büyük ölçüde kontrol sahibi olursunuz. Oklar, kesikli çizgiler, özel simgeler ve animasyonlu simgeler hakkında bilgi için Simgeler başlıklı makaleyi inceleyin.

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri, sıralı bir dizideki bir dizi koordinattan oluşmaları bakımından Polyline nesnelerine benzer. Poligonlar, kontur ve dolgu ile çizilir. Çokgenin kenarı (kontur) için özel renkler, ağırlıklar ve opaklıklar, kapalı alan (dolgu) için ise özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler onaltılık HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

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

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

Karmaşık bir şekil tanımlamak için birden fazla yola sahip bir çokgen kullanırsınız.

Not: Veri katmanı, poligon çizmek için basit bir yöntem sunar. Bu işlev, çokgen sarımını sizin için işleyerek delikli çokgenler çizmenizi kolaylaştırır. Veri katmanı dokümanlarına bakın.

Poligon ekle

Çokgen bir alan birkaç ayrı yol içerebileceğinden Polygon nesnesinin paths özelliği, her biri MVCArray türünde olan bir dizi diziyi belirtir. Her dizi, sıralı LatLng koordinatlarının ayrı bir dizisini tanımlar.

Yalnızca tek bir yoldan oluşan basit poligonlar için Polygon koordinatlarından oluşan tek bir dizi kullanarak LatLng oluşturabilirsiniz. Maps JavaScript API, paths özelliği içinde depolarken basit diziyi oluşturma sırasında 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üzenlenebilen şekilleri inceleyin. Benzer şekilde, kullanıcıların şekli sürüklemesine izin vermek için draggable özelliğini 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

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
Örneği görüntüleyin

Örneği deneyin

Poligon otomatik tamamlama

Yukarıdaki örnekteki Polygon, dört koordinat kümesinden oluşur. Ancak ilk ve son kümelerin aynı konumu tanımlayarak döngüyü tamamladığını unutmayın.LatLng Ancak uygulamada, çokgenler kapalı alanları tanımladığından son koordinat kümesini belirtmeniz gerekmez. Maps JavaScript API, belirli bir yol için son konumu ilk konuma bağlayan bir kontur çizerek çokgeni otomatik olarak tamamlar.

Aşağıdaki örnek, son LatLng öğesinin çıkarılması dışında öncekiyle aynıdır: örneği görüntüle.

Poligon kaldırma

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

bermudaTriangle.setMap(null);

Yukarıdaki yöntemin poligonu silmediğini unutmayın. Bu işlem, poligonu haritadan kaldırır. Poligonu silmek istiyorsanız poligonu haritadan kaldırmanız ve ardından poligonun kendisini null olarak ayarlamanız gerekir.

Poligon inceleme

Bir çokgen, koordinat dizisini dizi dizisi olarak belirtir. Her dizi MVCArray türündedir. Her bir "yaprak" dizisi, tek bir yolu belirten LatLng koordinatları 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(), belirtilen sıfır tabanlı dizin değerindeki LatLng değerini döndürür.
  • insertAt(), belirtilen sıfır tabanlı dizin değerine iletilen LatLng değerini ekler. Bu dizin değerindeki mevcut koordinatların ileriye taşındığını unutmayın.
  • removeAt(), belirtilen sıfır tabanlı dizin değerindeki LatLng öğesini 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;
index.ts

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
Örneği görüntüleyin

Örneği deneyin

Poligonda delik açma

Bir poligon içinde boş 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ımlayan koordinatların tersi sırada olmalıdır. Örneğin, dış yolun koordinatları saat yönünde sıralanmışsa 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. Bu sayede, delikli poligonlar çizmek daha kolay olur. Veri katmanı ile ilgili dokümanları inceleyin.

Aşağıdaki örnek, içteki yolun dıştaki yola zıt yönde kıvrıldığı iki yola sahip bir çokgen çizmektedir.

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

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
Örneği görüntüleyin

Örneği deneyin

Dikdörtgenler

Google Maps JavaScript API, genel bir Polygon sınıfına ek olarak Rectangle nesneleri için de özel bir sınıf içerir. Bu sınıf, nesnelerin oluşturulmasını kolaylaştırır.

Dikdörtgen ekleme

Rectangle, Polygon'ye benzer. Dikdörtgenin kenarı (kontur) için özel renkler, ağırlıklar ve opaklıklar, dikdörtgenin içindeki alan (dolgu) için ise özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler, onaltılık sayısal HTML biçiminde belirtilmelidir.

Polygon'nın aksine, Rectangle için paths tanımlamazsınız. Bunun yerine, dikdörtgenin şeklini bounds özelliği tanımlar. Bu özellik, dikdörtgen için google.maps.LatLngBounds değerini belirterek şekli tanımlar.

Dikdörtgenin editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilen şekilleri inceleyin. Benzer şekilde, kullanıcıların dikdörtgeni sürüklemesine izin vermek için draggable özelliğini 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

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
Örneği görüntüleyin

Örneği deneyin

Aşağıdaki kod, kullanıcı haritada her yakınlaştırma yaptığında bir dikdörtgen oluşturur. Dikdörtgenin boyutu, görünüm 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;
index.ts

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
Örneği görüntüleyin

Örneği deneyin

Dikdörtgen kaldırma

Haritadan bir dikdörtgeni kaldırmak için setMap() yöntemini çağırın ve bağımsız değişken olarak null değerini iletin.

rectangle.setMap(null);

Yukarıdaki yöntemin dikdörtgeni silmediğini unutmayın. Bu işlem, haritadaki dikdörtgeni kaldırır. Bunun yerine dikdörtgeni silmek istiyorsanız dikdörtgeni haritadan kaldırmanız ve ardından dikdörtgenin kendisini null olarak ayarlamanız gerekir.

Daireler

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

Çevre ekleme

Circle, Polygon ile benzerdir. Dairenin kenarı (fırça) için özel renkler, ağırlıklar ve opaklıklar, dairenin içindeki alan (dolgu) için ise özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler, onaltılık sayısal HTML stilinde belirtilmelidir.

Polygon'nın aksine, Circle için paths 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üzenlenebilen şekilleri inceleyin. Benzer şekilde, kullanıcıların daireyi sürüklemesine izin vermek için draggable özelliğini ayarlayabilirsiniz.

Aşağıdaki örnekte, Japonya'nın Kyoto şehrindeki konumlar arasındaki yaklaşık yürüme sürelerini göstermek için daireler kullanılmaktadır. Menüden gereken mesafeyi seçin, daireyi yeniden ortalamak için haritayı tıklayın ve daireyi sürükleyerek yeniden konumlandırın.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const buttons = document.querySelectorAll('input[name="radius"]');

    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#control-panel {
  display: none; /* Set to 'display: block' after the map loads. */
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: "Roboto", "sans-serif";
  font-size: medium;
  margin: 10px;
  padding: 10px;
}
style.css

HTML

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>
index.html
Örneği görüntüleyin

Örneği deneyin

Çevreleri kaldırma

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

circle.setMap(null);

Yukarıdaki yöntemin çemberi silmediğini unutmayın. Çevre haritadan kaldırılır. Bunun yerine daireyi silmek istiyorsanız daireyi haritadan kaldırmanız ve ardından dairenin kendisini null olarak ayarlamanız gerekir.

Kullanıcı tarafından düzenlenebilen ve sürüklenebilen şekiller

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

Kullanıcı tarafından nesnede yapılan değişiklikler oturumlar arasında kalıcı olmaz. Kullanıcının yaptığı düzenlemeleri kaydetmek istiyorsanız bilgileri kendiniz yakalayıp saklamanız gerekir.

Şekli düzenlenebilir hale getirme

Şeklin seçeneklerinde editable ayarını true olarak belirleyerek tüm şekiller (ç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 görüntüleyin

Şekli sürüklenebilir hale getirme

Varsayılan olarak, haritada çizilen şekiller konumda sabitlenir. Kullanıcıların bir şekli haritada farklı bir konuma sürüklemesine izin vermek için şekil seçeneklerinde draggable seçeneğini 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 çizgide sürüklemeyi etkinleştirirken geodesic özelliğini true olarak ayarlayarak poligonu veya çoklu çizgiyi jeodezik yapmayı da göz önünde bulundurmalısınız.

Bir jeodezik poligon taşındığında gerçek coğrafi şeklini korur. Bu nedenle, poligon Mercator projeksiyonunda kuzeye veya güneye doğru taşındığında bozulmuş görünür. Jeodezik olmayan poligonlar, ekranda her zaman ilk görünümlerini korur.

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

Koordinat sistemleri hakkında daha fazla bilgi için harita ve döşeme koordinatları kılavuzuna bakın.

Aşağıdaki haritada, yaklaşık olarak aynı boyutta ve boyutta 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 dinleme

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

Dinleyici, poligonun yolu üzerinde ayarlanmalıdır. Poligonun birden fazla yolu varsa her yola bir dinleyici ayarlanmalıdır.
Çoklu çizgi insert_at
remove_at
set_at

İşleyici, çoklu çizginin yolu üzerinde ayarlanmalıdır.
Dikdörtgen bounds_changed

İşinize yarayabilecek bazı 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ğinin işlenmesine ilişkin bir örneği inceleyin: Örneği görüntüle.

Sürükleme etkinliklerini dinleme

Bir şekil sürüklendiğinde, sürükleme işleminin başlangıcında, sonunda ve sürükleme sırasında 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 etkinliklerle ilgili dokümanlara bakın.