Şekiller ve çizgiler

Platform seçin: Android iOS JavaScript

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

Çoklu çizgiler

Haritanızda ç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 LatLng konum dizisinden oluşur ve bu konumları sıralı bir sırada birbirine bağlayan bir dizi çizgi segmenti oluşturur.

Çoklu çizgi ekleme

Polyline kurucusu, çizginin LatLng koordinatlarını belirten bir PolylineOptions dizisi ve poli çizginin görsel davranışını ayarlamak için bir stil dizisi alır.

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

  • strokeColor, "#FFFFFF" biçiminde bir on altılık 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'tir.
  • strokeWeight, çizginin piksel cinsinden genişliğini belirtir.

Çoklu çizginin editable mülkü, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıda kullanıcı tarafından düzenlenebilir şekiller hakkında bilgi verilmektedir. Benzer şekilde, draggable mülkünü kullanıcıların çizgiyi 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

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 çizgileri kaldırma

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

flightPath.setMap(null);

Yukarıdaki yöntemin çoklu çizgiyi silmediğini unutmayın. Poli çizgiyi haritadan kaldırır. Bunun yerine çoklu çizgiyi silmek istiyorsanız onu haritadan kaldırmanız ve ardından çoklu çizgiyi null olarak ayarlamanız gerekir.

Çoklu çizgileri inceleme

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

  • getAt(), sıfır tabanlı bir dizin değerinde LatLng değerini döndürür.
  • insertAt(), sıfır tabanlı bir dizin değerine geçirilen LatLng değerini ekler. Bu dizin değerinde bulunan mevcut koordinatların ileriye taşındığını unutmayın.
  • removeAt(), belirli bir sıfır tabanlı dizin değerinde bir LatLng'ı 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;
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

Bir çok çizgiye vektör tabanlı resimleri simge biçiminde ekleyebilirsiniz. Simgelerin ve PolylineOptions sınıfının bir kombinasyonuyla, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde çok fazla kontrole sahip olursunuz. Oklar, kesikli çizgiler, özel simgeler ve animasyonlu simgeler hakkında bilgi edinmek için Simgeler bölümüne bakın.

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri, sıralı bir sıradaki bir dizi koordinattan oluşmaları nedeniyle Polyline nesnelerine benzer. Poligonlar, çizgi ve dolgu ile çizilir. Poligonun kenarı (dış çizgi) için özel renkler, kalınlıklar ve opaklıklar, kapalı alan (dolgu) için de özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler on altılı HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

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

  • Tek bir poligonla tanımlanan, birbirine bitişik olmayan birden fazla alan.
  • Delik bulunan alanlar
  • Bir veya daha fazla alanın kesişimi.

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

Not: Veri katmanı, poligon çizmenin basit bir yolunu sunar. Poligon sarma işlemini sizin için gerçekleştirerek delik içeren poligonlar çizmeyi kolaylaştırır. Veri katmanı dokümanlarını inceleyin.

Poligon ekle

Poligonal bir alan birkaç ayrı yol içerebileceğinden, Polygon nesnesinin paths mülkü, her biri MVCArray türündeki bir dizi dizi belirtir. Her dizi, ayrı bir sıralı LatLng koordinat dizisi tanımlar.

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

Poligonun editable mülkü, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekiller bölümüne bakın. Benzer şekilde, draggable mülkünü ayarlayarak kullanıcıların şekli sürüklemesine izin verebilirsiniz.

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 LatLng koordinat grubundan oluşur ancak ilk ve son grupların aynı konumu tanımladığına dikkat edin. Bu da döngüyü tamamlar. Ancak pratikte, çokgenler kapalı alanları tanımladığından son koordinat grubunu belirtmeniz gerekmez. Maps JavaScript API, son konumu belirli bir yol için ilk konuma bağlayan bir çizgi çizerek poligonu otomatik olarak tamamlar.

Aşağıdaki örnek, son LatLng öğesinin atlanması dışında önceki örneğe aynıdır: Örneği görüntüleyin.

Poligon kaldırma

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

bermudaTriangle.setMap(null);

Yukarıdaki yöntemin poligonu silmediğini unutmayın. Poligonu haritada kaldırır. Bunun yerine poligonu silmek istiyorsanız önce haritadan kaldırmanız, ardından poligonu null olarak ayarlamanız gerekir.

Çokgenleri inceleme

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

  • getAt(), sıfır tabanlı bir dizin değerinde LatLng değerini döndürür.
  • insertAt(), sıfır tabanlı bir dizin değerine geçirilen LatLng değerini ekler. Bu dizin değerinde bulunan mevcut koordinatların ileriye taşındığını unutmayın.
  • removeAt(), belirli bir sıfır tabanlı dizin değerinde bir LatLng'ı 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

Bir poligona delik açma

Bir poligon içinde boş alan oluşturmak için biri diğerinin içinde olacak şekilde iki yol oluşturmanız gerekir. Delik oluşturmak için iç yolu tanımlayan koordinatlar, dış yolu tanımlayan koordinatların ters sırasına sahip 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öneterek delik içeren poligonları çizmeyi kolaylaştırır. Veri katmanı dokümanlarını inceleyin.

Aşağıdaki örnekte, iç yol dış yolun ters yönünde sarılmış iki yol içeren bir poligon çizilmektedir.

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 nesnelerinin oluşturulmasını basitleştirmek için bu nesnelere özel bir sınıf da içerir.

Dikdörtgen ekleme

Rectangle, dikdörtgenin kenarı (fırça) için özel renkler, kalınlıklar ve opaklıklar ve dikdörtgenin içindeki alan (dolgu) için özel renkler ve opaklıklar tanımlayabileceğiniz bir Polygon'ye benzer. Renkler on altılı sayısal HTML stilinde belirtilmelidir.

Polygon'ün aksine, Rectangle için paths tanımlamazsınız. Bunun yerine, dikdörtgenin şeklini belirten bir bounds mülkü vardır. Bu mülk, dikdörtgen için bir google.maps.LatLngBounds belirtir.

Dikdörtgenin editable mülkü, 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, kullanıcıların dikdörtgeni sürüklemesine izin vermek için draggable mülkünü 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 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;
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örtgeni kaldırma

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

rectangle.setMap(null);

Yukarıdaki yöntemin dikdörtgeni silmediğini unutmayın. Dikdörtgen haritadan kaldırılır. Dikdörtgeni silmek istiyorsanız haritadan kaldırmanız ve ardından dikdörtgeni null olarak ayarlamanız gerekir.

Daireler

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

Çevre ekleme

Circle, dairenin kenarı (fırça) için özel renkler, kalınlıklar ve opaklıklar, dairenin içindeki alan (dolgu) için de özel renkler ve opaklıklar tanımlayabileceğiniz Polygon'ye benzer. Renkler, on altılık sayısal HTML stilinde belirtilmelidir.

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

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

Dairenin editable mülkü, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki kullanıcı tarafından düzenlenebilir şekiller bölümüne bakın. Benzer şekilde, draggable mülkünü 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

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

Örneği Deneyin

Çevreleri kaldırma

Haritadan bir daireyi 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 daireyi silmediğini unutmayın. Çember haritadan kaldırılır. Bunun yerine daireyi silmek istiyorsanız daireyi haritadan kaldırmanız ve ardından daireyi null olarak ayarlamanız gerekir.

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

Bir şeklin düzenlenebilir hale getirilmesi, şeklin üzerine kullanıcıların doğrudan haritadan yeniden konumlandırmak, yeniden şekillendirmek ve yeniden boyutlandırmak için kullanabileceği tutamaçların eklenmesini sağlar. Ayrıca, kullanıcıların haritadaki farklı bir yere taşıyabilmesi için şekilleri sürüklenebilir hale getirebilirsiniz.

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

Bir şekli düzenlenebilir hale getirme

Herhangi bir şekil (çoklu çizgiler, poligonlar, daireler ve dikdörtgenler), şeklin seçeneklerinde editable değerini true olarak ayarlayarak 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

Bir şekli sürüklenebilir hale getirme

Haritada çizilen şekiller varsayılan olarak sabitlenir. Kullanıcıların bir şekli haritada farklı bir konuma sürüklemesine izin vermek için şekil seçeneklerinde draggable'yi 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 geodezik hale getirmeyi de düşünebilirsiniz.

Geodeziksel bir poligon taşındığında gerçek coğrafi şeklini korur. Bu da Mercator projeksiyonunda kuzeye veya güneye taşınan poligonun bozuk görünmesine neden olur. Geodeziden olmayan poligonlar, ekranda her zaman ilk görünümlerini korur.

Geodez poli çizgisinde, poli çizginin segmentleri, Merkatör projeksiyonundaki düz çizgilerin aksine, dünyanın bir küre olduğu varsayılarak dünyanın yüzeyindeki iki nokta arasındaki en kısa yol olarak çizilir.

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 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ıktan sonra 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 yolunda ayarlanmalıdır. Poligonun birden fazla yolu varsa her yolda bir dinleyici ayarlanmalıdır.
Çoklu çizgi insert_at
remove_at
set_at

Dinleyici, çoklu çizginin 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 üzerinde düzenleme etkinliği işleme örneğini inceleyin: örneği görüntüleyin.

Sürükleme etkinliklerini dinleme

Bir şekil sürüklendiğinde, sürükleme işleminin başlangıcında ve sonunda, ayrıca sürükleme sırasında etkinlikler tetiklenir. Aşağıdaki etkinlikler çoklu çizgiler, poligonlar, daireler ve dikdörtgenler 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 işleme hakkında daha fazla bilgi için etkinliklerle ilgili dokümanlara bakın.