Şekiller ve çizgiler

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. Ayrıca, şekillerinizi kullanıcıların düzenleyebileceği veya sürükleyebileceği şekilde yapılandırabilir ya da coğrafi sınırları ve güvenli bölge sınırlarını kontrol etmek için şekilleri Geometry kitaplığı (google.maps.GeometryLibrary) ile birleştirebilirsiniz.

Çoklu çizgiler

Haritanızda çizgi çizmek için çoklu çizgi kullanın. Polyline sınıfı, harita üzerinde bağlı çizgi segmentlerinin doğrusal bir yer paylaşımını tanımlar. Polyline nesnesi, LatLng konumlarından oluşan bir diziden oluşur ve bu konumları sıralı bir şekilde bağlayan bir dizi çizgi segmenti 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, harita üzerinde 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 oluşturduktan sonra bu özellikleri değiştirebilirsiniz. Çoklu çizgi, aşağıdaki çizgi stillerini destekler:

  • strokeColor, "#FFFFFF" biçiminde onaltılık bir HTML rengi belirtir. Polyline sınıfı, adlandırılmış renkleri desteklemez.
  • strokeOpacity, çizgi 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'dir.
  • strokeWeight, çizginin genişliğini piksel cinsinden belirtir.

Çoklu çizginin editable özelliği, kullanıcıların şekli düzenleyip düzenleyemeyeceğini belirtir. Aşağıdaki Kullanıcı tarafından düzenlenebilir ş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, Kaliforniya ile Brisbane, Avustralya arasındaki ilk Pasifik aşırı uçuşun rotasını gösteren iki piksel genişliğinde kırmızı bir çoklu çizgi oluşturulmaktadır.

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.
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    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 Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();

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.
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    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 Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();
Örneği görüntüleyin

Çoklu çizgiyi kaldırma

Bir çoklu çizgiyi haritadan kaldırmak için bağımsız değişken olarak null değerini ileterek 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. Bu yöntem, çoklu çizgiyi haritadan kaldırır. Çoklu çizgiyi silmek istiyorsanız haritadan kaldırmanız ve ardından çoklu çizgiyi null olarak ayarlamanız gerekir.

Çoklu çizgiyi inceleme

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

  • getAt(), sıfır tabanlı belirli bir dizin değerindeki LatLng değerini döndürür.
  • insertAt(), iletilen bir LatLng değerini belirli bir sıfır tabanlı dizin değerine ekler. Bu dizin değerindeki mevcut koordinatların ileri taşındığını unutmayın.
  • removeAt(), sıfır tabanlı belirli bir 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;
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

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

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();

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;
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

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

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();
Örneği görüntüleyin

Çoklu çizgiyi özelleştirme

Çoklu çizgiye sembol biçiminde vektör tabanlı resimler ekleyebilirsiniz. Sembollerin ve PolylineOptions sınıfının bir kombinasyonuyla, haritanızdaki çoklu çizgilerin görünümü ve tarzı üzerinde büyük bir 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 koordinat dizisinden oluşmaları bakımından Polyline nesnelerine benzer. Poligonlar, kontur ve dolgu ile çizilir. Çokgenin kenarı (çizgi) için özel renkler, kalınlı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ımlanan birden fazla bitişik olmayan alan.
  • Delikli alanlar.
  • Bir veya daha fazla alanın kesişimleri.

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

Not: Veri katmanı, çokgen çizmenin basit bir yolunu sunar. Çokgen sarmayı sizin için gerçekleştirerek delikli çokgenler çizmeyi kolaylaştırır. Veri katmanı belgelerine 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 dizisi belirtir. Her dizi, sıralı LatLng koordinatlarından oluşan ayrı bir diziyi tanımlar.

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

Çokgenin editable özelliği, 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, 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;

JavaScript

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

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
Örneği görüntüleyin

Poligon otomatik tamamlama

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

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

Poligon kaldırma

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

bermudaTriangle.setMap(null);

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

Çokgeni inceleme

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

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

JavaScript

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

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

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

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

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

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

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

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

window.initMap = initMap;
Örneği görüntüleyin

Çokgende delik açma

Bir poligonun içinde boş bir alan oluşturmak için biri diğerinin içinde olan iki yol oluşturmanız gerekir. Boşluğu oluşturmak için iç yolu tanımlayan koordinatlar, dış yolu tanımlayan koordinatların tersi sırada olmalıdır. Örneğin, dış yolun koordinatları saat yönündeyse iç yol saat yönünün tersine olmalıdır.

Not: Veri katmanı, iç ve dış yolların sırasını sizin için yöneterek delikli çokgenler çizmeyi kolaylaştırır. Veri katmanı belgelerine bakın.

Aşağıdaki örnekte, iki yolu olan bir poligon çizilmektedir. İç yol, dış yolun tersi yönde sarılmıştır.

TypeScript

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

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

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

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

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

  bermudaTriangle.setMap(map);
}

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

JavaScript

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

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
Örneği görüntüleyin

Dikdörtgenler

Google Haritalar JavaScript API, genel bir Polygon sınıfının yanı sıra Rectangle nesnelerinin oluşturulmasını basitleştirmek için özel bir sınıf içerir.

Dikdörtgen ekleme

Rectangle, Polygon ile benzerdir. Dikdörtgenin kenarı (kontur) için özel renkler, kalınlıklar ve opaklıklar, dikdörtgenin içindeki alan (dolgu) için de özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler onaltılık sayısal HTML stilinde belirtilmelidir.

Polygon öğesinden farklı olarak, Rectangle için paths tanımlamazsınız. Bunun yerine, dikdörtgenin şeklini tanımlayan bir bounds özelliği vardır. Bu özellik, dikdörtgen için bir google.maps.LatLngBounds belirterek şeklini 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üzenlenebilir şekiller bölümüne bakın. 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;

JavaScript

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

window.initMap = initMap;
Örneği görüntüleyin

Aşağıdaki kod, kullanıcı haritadaki yakınlaştırmayı 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;

JavaScript

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

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

window.initMap = initMap;
Örneği görüntüleyin

Dikdörtgeni kaldırma

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

rectangle.setMap(null);

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

Daireler

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

Çevre ekleme

Circle, Polygon ile benzerdir. Dairenin kenarı (çizgi) için özel renkler, kalınlı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 öğesinden farklı olarak, Circle için paths tanımlamazsınız. Bunun yerine, dairenin şeklini tanımlayan iki ek özelliği vardır:

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

Dairenin editable özelliği, 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, 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ılmıştır. Menüden gerekli 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')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

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

    // Create the circle.
    const walkingCircle = new 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 AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // 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', (changeEvent) => {
            const target = changeEvent.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener(
        'click',
        (
            mapsMouseEvent:
                google.maps.MapMouseEvent | google.maps.IconMouseEvent
        ) => {
            const newCenter = mapsMouseEvent.latLng;
            if (!newCenter) return;
            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();
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

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

    // Create the circle.
    const walkingCircle = new 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 AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // 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', (changeEvent) => {
            const target = changeEvent.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;
        if (!newCenter) return;
        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();
    });
}

void init();

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

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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>
Örneği görüntüleyin

Çevreleri kaldırma

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

circle.setMap(null);

Yukarıdaki yöntemin daireyi silmediğini unutmayın. Daireyi haritadan kaldırır. Daireyi silmek istiyorsanız 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

Şekli düzenlenebilir hale getirdiğinizde şekle tutma noktaları eklenir. Kullanıcılar bu noktaları kullanarak şekli doğrudan harita üzerinde yeniden konumlandırabilir, yeniden şekillendirebilir ve yeniden boyutlandırabilir. Ayrıca, bir şekli sürüklenebilir hale getirerek kullanıcıların haritada farklı bir yere taşımasını sağlayabilirsiniz.

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

Şekilleri düzenlenebilir hale getirme

Şekil seçeneklerinde editable değerini true olarak ayarlayarak herhangi bir şekli (çoklu çizgiler, çokgenler, daireler ve dikdörtgenler) kullanıcı tarafından düzenlenebilir olarak ayarlayabilirsiniz.

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, harita üzerinde çizilen bir şeklin konumu sabitlenir. Kullanıcıların bir şekli haritada farklı bir konuma sürüklemesine izin vermek için şekil seçeneklerinde draggable 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 çizgide sürüklemeyi etkinleştirirken geodesic özelliğini true olarak ayarlayarak poligonu veya çoklu çizgiyi jeodezik yapmayı da düşünebilirsiniz.

Jeodezik bir poligon, taşındığında gerçek coğrafi şeklini korur. Bu durum, poligonun Mercator projeksiyonunda kuzeye veya güneye taşınırken bozuk görünmesine neden olur. Jeodezik olmayan çokgenler, ekrandaki ilk görünümlerini her zaman korur.

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

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

Aşağıdaki haritada yaklaşık olarak aynı boyut ve ölçülere sahip iki üçgen gösterilmektedir. Kırmızı üçgenin geodesic özelliği true olarak ayarlanmış. Kuzeye doğru ilerledikç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

İşleyici, çokgenin yolunda ayarlanmalıdır. Çokgenin birden fazla yolu varsa her yol için bir dinleyici ayarlanmalıdır.
Çoklu çizgi insert_at
remove_at
set_at

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

Yararlı olabilecek 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ğini 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şında ve sonunda, ayrıca sürükleme sırasında etkinlikler tetiklenir. Çoklu çizgiler, çokgenler, 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 belgelere bakın.

Coğrafi sınırlar ve güvenli bölge sınırları

Google Haritalar Platformu, bağımsız bir Geofencing API sunmaz. Web haritasında coğrafi sınır yarıçapı veya güvenli bölge göstermek ve canlı bir koordinatın bu sınırın içinde olup olmadığını kontrol etmek için şekilleri, google.maps.importLibrary("geometry") aracılığıyla yüklenen Geometry kitaplığı (google.maps.GeometryLibrary) ile birleştirin:

Aşağıdaki örnekte dairesel bir güvenli bölge ve çokgen bir coğrafi sınır çizilir, ardından canlı bir koordinatın her bir sınırın içinde olup olmadığı kontrol edilir:

const {Circle, Polygon} = await google.maps.importLibrary("maps");
const {poly} = await google.maps.importLibrary("geometry");

const livePosition = {lat: 37.424, lng: -122.085};

// 1. Circular geofence (500-meter radius)
const circularGeofence = new Circle({
  map,
  center: {lat: 37.422, lng: -122.084},
  radius: 500,
});
const isInsideCircle = poly.containsLocation(livePosition, circularGeofence);

// 2. Polygonal geofence
const polygonGeofence = new Polygon({
  map,
  paths: [
    {lat: 37.420, lng: -122.088},
    {lat: 37.420, lng: -122.080},
    {lat: 37.426, lng: -122.080},
    {lat: 37.426, lng: -122.088},
  ],
});
const isInsidePolygon = poly.containsLocation(livePosition, polygonGeofence);