Şekiller ve çizgiler

Platform seçin: Android iOS JavaScript

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, haritadaki bir nesnedir bir enlem/boylam koordinatına bağlıdır. Aşağıdaki şekiller kullanılabilir: çizgiler, poligonlar, daireler ve dikdörtgenler. Şekillerinizi yapılandırarak da kullanıcıların bunları düzenleyebilir veya sürükleyebilirsiniz.

Çoklu çizgiler

Haritanıza bir çizgi çizmek için çoklu çizgi kullanın. İlgili içeriği oluşturmak için kullanılan Polyline sınıfı, bağlı hattın doğrusal yer paylaşımını tanımlar ve segmentleri görebilirsiniz. Polyline nesnesi, LatLng konuma gider ve sıralı bir şekilde birbirine bağlayabilirsiniz.

Çoklu çizgi ekleme

Polyline oluşturucusu, PolylineOptions, LatLng değerini belirtiyor çizginin koordinatlarını ve çoklu çizginin konumunu ayarlamak için bir dizi stil yardımcı olabilir.

Polyline nesne, belirli bir konum üzerinde bir dizi düz segmentler olarak tıklayın. Fırça için özel renkler, ağırlıklar ve opaklıklar belirtebilirsiniz olduğunda PolylineOptions içindeki satırın isterseniz bu özellikleri inşaattan sonra değiştirebilirsiniz. Çoklu çizgi aşağıdaki çizgi stillerini destekler:

  • strokeColor, biçimde onaltılık HTML rengini belirtir "#FFFFFF". Polyline sınıfı desteklemiyor renklendirir.
  • strokeOpacity, Çizginin opaklığını belirlemek için 0.0 ve 1.0 rengi. Varsayılan değer: 1.0.
  • strokeWeight, çizginin genişliğini piksel cinsinden belirtir.

Çoklu çizginin editable özelliği, kullanıcıların şekli düzenleyin. Kullanıcı tarafından düzenlenebilir şekillere bakın bölümüne göz atın. Benzer şekilde, draggable özelliğini satırı sürüklemesine yardımcı olur.

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 inceleyin

Örneği Deneyin

Çoklu çizgiyi kaldırma

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

flightPath.setMap(null);

Yukarıdaki yöntemin çoklu çizgiyi silmediğini unutmayın. Şunları kaldırır: çoklu çizgiyi seçin. Bunun yerine çoklu çizgiyi silmek isterseniz bunu haritadan kaldırmanız ve çoklu çizgisini null olarak ayarlayın.

Çoklu çizgiyi inceleme

Çoklu çizgi, bir dizi koordinatın bir dizi LatLng nesne. Bu koordinatlar çizginin yolunu belirler. Koordinatları almak için getPath() numaralı telefonu arayın. MVCArray türünde bir dizi döndürür. Şunları yapabilirsiniz: aşağıdaki işlemleri kullanarak diziyi değiştirebilir ve inceleyebilirsiniz:

  • getAt(), belirli bir düzeyde LatLng değerini döndürür tabanlı bir dizin değeridir.
  • insertAt(), başarılı bir LatLng ekler dizine ekler. Herhangi bir söz konusu dizin değerindeki mevcut koordinatlar ileriye taşınır.
  • removeAt(), belirli bir düzeyde LatLng kaldırır tabanlı bir dizin değeridir.
ziyaret edin.

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 inceleyin

Örneği Deneyin

Çoklu çizgiyi özelleştirin

Vektör tabanlı resimleri bir çoklu çizgiye semboller biçiminde ekleyebilirsiniz. Şununla PolylineOptions sınıfını kullandığınızda haritanızdaki çoklu çizgilerin görünümü ve verdiği izlenim üzerinde çok yüksek düzeyde denetime sahip olursunuz. Bilgi için Semboller bölümüne bakın oklar hakkında, kesik çizgili, özel simgeler ve animasyonlu simgeler.

Poligonlar

Poligon, kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder; bir dizi koordinatla tanımlanır. Polygon nesneleri, Polyline nesneye benziyor sıralı olarak bir dizi koordinattan oluşmalarıdır. Poligonlar bir çizgi ve dolgu ile çizilir. Özel renkler tanımlayabilir, poligonun (fırça) kenarının ağırlıkları ve opaklıkları ile özelleştirilebilir renk ve opaklıklar (dolgu) sağlar. Renkler: onaltılık HTML biçiminde belirtilir. Renk adları desteklenmiyor.

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

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

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

Not: Veri katmanı, reklam sunmanın harika bir seçenektir. Poligon sarmalamanızı sizin için hallederek daha kolay kullanarak delikli çokgenler çizebilirsiniz. Bkz. projenin Veri katmanı.

Poligon ekle

Bir poligonal alan birkaç ayrı yol içerebileceği için, Polygon nesnesinin paths özelliği her biri MVCArray türünde bir dizi dizisi. Her dizi bir sıralı LatLng koordinatlarının ayrı bir dizisi.

Tek bir yoldan oluşan basit poligonlar için, tek bir dizi kullanarak bir Polygon oluşturun LatLng koordinatları. Maps JavaScript API, basit diziyi bir dizi şeklinde düzenleyebilirsiniz. paths mülkü arasında. API, Tek yoldan oluşan poligonlar için getPath() yöntemi.

Poligonun editable özelliği, kullanıcıların düzenleme izni olup olmadığını belirler şekli. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini kullanıcıların şunları yapmasına izin verecek şekilde ayarlayabilirsiniz: şekli sürükleyin.

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 inceleyin

Örneği Deneyin

Poligon otomatik tamamlama

Yukarıdaki örnekte Polygon, dört grup etiketten oluşur. LatLng koordinatları, ancak ilk ve son kümenin döngüyü tamamlamak için aynı konumu tanımlamalısınız. Ancak pratikte çokgenler kapalı alanları tanımladığından, test için kullanılacak son koordinat grubudur. Maps JavaScript API otomatik olarak tamamlanacaktır çizgi çizerek son konumu ilk konuma bağlayan bir çizgi çizerek poligona konumdur.

Aşağıdaki örnek, öncekiyle aynıdır, ancak yine de son LatLng atlanır: örneği inceleyin.

Poligon kaldırma

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

bermudaTriangle.setMap(null);

Yukarıdaki yöntemin poligonu silmediğini unutmayın. Şunları kaldırır: poligonu haritadan çıkarır. Bunun yerine çokgeni silmek isterseniz bunu haritadan kaldırmanız ve çokgenin kendisini null öğesine dönüştürür.

Poligonu inceleme

Çokgenler, koordinat dizilerini dizi olarak belirtir her dizinin MVCArray türünde olduğu diziler. Her biri "yaprak" dizi, LatLng koordinat dizisidir tek bir yol belirtmenizi sağlar. Bu koordinatları almak için Polygon nesnesinin getPaths() yöntemi. dizisi, değiştirmeniz gereken bir MVCArray Şu işlemleri kullanarak dosyayı inceleyin:

  • getAt(), belirli bir düzeyde LatLng değerini döndürür tabanlı bir dizin değeridir.
  • insertAt(), başarılı bir LatLng ekler dizine ekler. Herhangi bir söz konusu dizin değerindeki mevcut koordinatlar ileriye taşınır.
  • removeAt(), belirli bir düzeyde LatLng kaldırır tabanlı bir dizin değeridir.
ziyaret edin.

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 inceleyin

Örneği Deneyin

Poligonda delik açma

Bir poligon içinde boş bir alan oluşturmak için iki yol oluşturmanız gerekir: iç içe geçmiştir. Deliği oluşturmak için, iç yüzeyi tanımlayan koordinatlar yolu, dış yolu tanımlayanların tersinde 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ı, katmanın iç ve dış yolları kullanarak delikli çokgenler çizmenizi kolaylaştırır. Bkz. belgeler seçin.

Aşağıdaki örnekte iki yolu olan bir poligon çiziyor. Yolun iç yolu dış yolun tersi yönünde geçerlidir.

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 inceleyin

Örneği Deneyin

Dikdörtgenler

Genel bir Polygon sınıfına ek olarak, Google Haritalar JavaScript API, Rectangle nesneleri kullanarak oluşturma işlemini basitleştirebilir.

Dikdörtgen ekleyin

Rectangle, aşağıda belirtilen öğelerdeki Polygon ile benzerdir: kenarları için özel renkler, ağırlıklar ve opaklıklar tanımlayabileceğinizden dikdörtgen (fırça) ve içindeki alan için özel renkler ile dikdörtgen (dolgu). Renkler, onaltılık sayısal HTML'de belirtilmelidir stiline sahip.

Polygon işlevinin aksine, paths öğesini siz tanımlamazsınız. Rectangle için. Dikdörtgenin yerine bounds özel bir Dikdörtgen için google.maps.LatLngBounds.

Dikdörtgenin editable özelliği, kullanıcılar şekli düzenleyebilir. Bkz. kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini de ayarlayabilirsiniz. Böylece kullanıcıların dikdörtgeni sürüklemesine olanak tanır.

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 inceleyin

Örneği Deneyin

Aşağıdaki kod, kullanıcı yakınlaştırmayı her değiştirdiğinde bir dikdörtgen oluşturur tıklayın. Dikdörtgenin boyutunu görüntü alanı belirler.

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 inceleyin

Örneği Deneyin

Dikdörtgeni kaldırma

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

rectangle.setMap(null);

Yukarıdaki yöntemin dikdörtgeni silmediğini unutmayın. Şunları kaldırır: resimdeki dikdörtgeni çizin. Bunun yerine dikdörtgeni silmek isterseniz bunu haritadan kaldırmanız ve dikdörtgeni null olarak ayarlayın.

Daireler

Genel Polygon sınıfına ek olarak, Google Haritalar JavaScript API, Circle nesneleri kullanarak oluşturma işlemini basitleştirebilir.

Çevre ekleyin

Circle, Polygon görünümüne benzerdir. Çünkü dairenin kenarı için özel renkleri, ağırlıkları ve opaklıkları ( çizgi) ve dairenin içindeki alan için özel renkler ile opaklıklar ( ekleyin). Renkler, onaltılık sayısal HTML stiliyle belirtilmelidir.

Polygon işlevinin aksine, paths öğesini siz tanımlamazsınız. Circle için. Bunun yerine bir dairede özellikleri içerir:

  • center, google.maps.LatLng özelliğini belirtiyor dairenin merkezinden uzaklaştırın.
  • radius, dairenin yarıçapını metre cinsinden belirtir.

Çevrenin editable özelliği, kullanıcıların düzenleme izni olup olmadığını belirtir şekli. Aşağıdaki kullanıcı tarafından düzenlenebilir şekillere bakın. Benzer şekilde, draggable özelliğini daireyi sürüklemelerini sağlar.

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 inceleyin

Örneği Deneyin

Çevre kaldırma

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

circle.setMap(null);

Yukarıdaki yöntemin çevreyi silmediğini unutmayın. Şunları kaldırır: şekli seçin. Bunun yerine çevreyi silmek isterseniz bunu haritadan kaldırmanız ve çevresini null olarak ayarlayın.

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

Bir şekli düzenlenebilir hale getirdiğinizde şekle tutma yerleri eklenir ve kullanıcılar bunları kullanabilir kullanarak şekli doğrudan harita üzerinde yeniden konumlandırabilir, yeniden şekillendirebilir ve yeniden boyutlandırabilirsiniz. Ayrıca transkriptinizi kullanıcıların haritada farklı bir yere taşıyabilmesi için şekli sürüklenebilir hale getirebilirsiniz.

Nesnede kullanıcı tarafından yapılan değişiklikler oturumlar arasında kalıcı olmaz. Şu durumda: Kullanıcının düzenlemelerini kaydetmek istiyorsanız, bilgileri yakalamalı ve saklamalısınız kendiniz.

Şekli düzenlenebilir hale getirme

Herhangi bir şekil (çoklu çizgiler, poligonlar, daireler ve dikdörtgenler) ayarlanabilir kullanıcı tarafından düzenlenebilir, editabletrue şeklin seçeneklerini de kullanabilirsiniz.

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 inceleyin

Şekli sürüklenebilir yapma

Varsayılan olarak, haritada çizilen bir şeklin konumu sabitlenir. İzin vermek için bir şekli haritada farklı bir yere sürüklemesini, Şekil seçeneklerinde draggable - true.

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, şunları da göz önünde bulundurmalısınız: geodesic ayarlayarak poligon veya çoklu çizgi jeodeziklerini yapma özelliğini true olarak ayarlayın.

Bir jeodezik poligon taşındıktan sonra gerçek coğrafi şeklini korur kuzeye veya güneye doğru hareket ettiğinde çokgenin bozuk görünmesine neden olur. Merkatör projeksiyonu. Jeodezik olmayan poligonların başlangıçtaki konumları her zaman ekranda daha görünür.

Jeodezik bir çoklu çizgide, çoklu çizginin segmentleri Dünya'nın dünyanın farklı yerlerinde olduğu varsayıldığında, Dünya yüzeyindeki iki nokta arasındaki en kısa yol Merkatör projeksiyonunda düz çizgilerin aksine bir küre.

Koordinat sistemleri hakkında daha fazla bilgi edinmek için harita ve parça koordinatlar.

Aşağıdaki haritada hemen hemen aynı boyutta iki üçgen seçin. Kırmızı üçgenin geodesic özelliği true. Kuzeye doğru hareket ettikçe şeklinin nasıl değiştiğine dikkat edin.

Örneği inceleyin

Düzenleme etkinliklerini dinleme

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

Şekil Etkinlikler
Daire radius_changed
center_changed
Poligon insert_at
remove_at
set_at

İşleyici, poligonun yolu üzerinde ayarlanmalıdır. Çokgen her yol için bir işleyici ayarlanmalıdır.
Çoklu çizgi insert_at
remove_at
set_at

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

Bazı faydalı 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şlemeyle ilgili bir örnek aşağıda verilmiştir: örneğini inceleyin.

Etkinlikleri sürüklemeyi dinleyin

Bir şekil sürüklendiğinde etkinlikler, sürükleme işleminin başlangıcı ve bitişinde tetiklenir devam ettirebilirsiniz. Aşağıdaki etkinlikler şunun için tetiklenir: çokgenler, çemberler ve dikdörtgenler.

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

Etkinlikleri işleme hakkında daha fazla bilgi için etkinlikler hakkındaki belgelere göz atın.