צורות וקווים

אפשר להוסיף למפה צורות שונות. צורה היא אובייקט במפה. מקושר לקואורדינטה של קו רוחב/אורך. אלה הצורות הזמינות: קווים, פוליגונים, מעגלים ומלבנים. תוכלו גם להגדיר את הצורות כדי שהמשתמשים יוכלו לערוך או לגרור אותן.

קווים פוליגוניים

כדי לשרטט קו במפה, צריך להשתמש בקו פוליגוני. המחלקה Polyline מגדירה שכבת-על לינארית של קו מחובר פלחים במפה. אובייקט Polyline מורכב ממערך LatLng מיקומים, ויוצרת סדרה של מקטעי קו מחברים את המיקומים האלה לפי הסדר.

הוספת קו פוליגוני

ה-constructor של Polyline לוקח קבוצה של PolylineOptions שמציין את LatLng של הקו ושל קבוצת סגנונות כדי להתאים את הקו הפוליגוני על ההתנהגות החזותית.

Polyline אובייקטים משורטטים כסדרה של קטעים ישרים על את המפה. ניתן לציין צבעים, משקלים ושקיפות מותאמים אישית עבור הקו של הקו בתוך PolylineOptions כאשר את הקו, או שאפשר לשנות את המאפיינים שלהם לאחר הבנייה. קו פוליגוני תומך בסגנונות הקווים הבאים:

• strokeColor מציין צבע HTML הקסדצימלי של הפורמט "#FFFFFF". הכיתה Polyline לא תומכת צבעים בעלי שם.
• strokeOpacity מציין ערך מספרי בין 0.0 ו-1.0 כדי לקבוע את האטימות של הקו צבע. ערך ברירת המחדל הוא 1.0.
• strokeWeight מציין את רוחב השורה בפיקסלים.

המאפיין editable של הקו הפוליגוני מציין אם משתמשים יכולים לערוך את הצורה. הצגת צורות הניתנות לעריכה על-ידי המשתמש שלמטה. באופן דומה, אפשר להגדיר את המאפיין draggable כדי לאפשר כדי לגרור את הקו.

// 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

// 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

הסרת קו פוליגוני

כדי להסיר קו פוליגוני מהמפה, מפעילים את השיטה setMap() העברת null כארגומנט. בדוגמה הבאה, flightPath הוא אובייקט קו פוליגוני:

flightPath.setMap(null);

שימו לב שהשיטה שלמעלה לא מוחקת את הקו הפוליגוני. הוא מסיר הקו הפוליגוני מהמפה. אם במקום זאת רוצים למחוק את הקו הפוליגוני, צריך להסיר אותו מהמפה ואז להגדיר את הקו הפוליגוני עצמו אל null.

בדיקת קו פוליגוני

קו פוליגוני מציין סדרה של קואורדינטות כמערך של LatLng אובייקטים. הקואורדינטות האלה קובעות את נתיב הקו. כדי לאחזר את הקואורדינטות, צריך לקרוא לפונקציה getPath(), מחזירה מערך מסוג MVCArray. אפשר לבדוק ולבחון את המערך באמצעות הפעולות הבאות:

• הפונקציה getAt() מחזירה את הערך LatLng בערך ערך אינדקס מבוסס אפס.
• insertAt() מכניס LatLng שעבר בערך נתון של אינדקס מבוסס אפס. שימו לב שבכל אחת הקואורדינטות הקיימות בערך האינדקס הזה מועברות קדימה.
• removeAt() מסיר LatLng בכל פעם ערך אינדקס מבוסס אפס.

// 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

// 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

התאמה אישית של קו פוליגוני

ניתן להוסיף תמונות מבוססות-וקטור לקו פוליגוני באמצעות סמלים. עם שילוב של סמלים והמחלקה PolylineOptions, יש לך שליטה רבה על המראה והתחושה של קווים פוליגוניים במפה. מידע נוסף זמין בקטע סמלים על חיצים, קווים מקווקווים, סמלים מותאמים אישית וסמלים מונפשים.

פוליגונים

פוליגון מייצג שטח שמוקף בנתיב סגור (או לולאה), מוגדר על ידי סדרה של קואורדינטות. Polygon אובייקטים דומים ל-Polyline אובייקטים מכיוון שהן מורכבות מסדרה של קואורדינטות לפי סדר מסוים. פוליגונים משורטטים עם קו ומילוי. אפשר להגדיר צבעים בהתאמה אישית, המשקולות, ושקיפות של קצה המצולע (הקו) צבעים ושקיפות של האזור תחום (המילוי). הצבעים צריכים להיות שמצוין בפורמט HTML הקסדצימלי. שמות של צבעים לא נתמכים.

אובייקטים מסוג Polygon יכולים לתאר צורות מורכבות, כולל:

• מספר אזורים לא רציפים שמוגדרים על ידי פוליגון יחיד.
• אזורים עם חורים.
• צמתים של אזור אחד או יותר.

כדי להגדיר צורה מורכבת, צריך להשתמש בפוליגון עם מספר נתיבים.

הערה: שכבת הנתונים מציעה דרך פשוטה של שרטוט מצולעים. הוא מטפל בשרטוט פוליגונים וכך קל יותר כדי לשרטט מצולעים עם חורים. לצפייה מסמכי תיעוד של בשכבת הנתונים.

הוספת מצולע

מכיוון שאזור פוליגוני עשוי לכלול כמה שבילים נפרדים, המאפיין paths של אובייקט Polygon מציין מערך של מערכים, כל אחד מסוג MVCArray. כל מערך מגדיר רצף נפרד של קואורדינטות LatLng לפי סדר כרונולוגי.

בפוליגונים פשוטים שמורכבים מדרך אחת בלבד, אפשר: ליצור Polygon באמצעות מערך יחיד של קואורדינטות LatLng. תתבצע המרה של Maps JavaScript API את המערך הפשוט למערך מערכים בזמן הבנייה, כשמאחסנים אותו בתוך הנכס paths. ה-API מספק שיטת getPath() לפוליגונים שמורכבים מנתיב אחד.

המאפיין editable של הפוליגון מציין אם המשתמשים יכולים לערוך את הצורה. ראו למטה צורות הניתנות לעריכה על ידי משתמשים. באופן דומה, אפשר להגדיר את המאפיין draggable כדי לאפשר למשתמשים גוררים את הצורה.

// 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

// 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

השלמה אוטומטית בפוליגון

ה-Polygon בדוגמה שלמעלה מורכב מארבע קבוצות של את הקואורדינטות LatLng, אבל שימו לב שהקבוצה הראשונה והאחרונה מגדיר את אותו מיקום, פעולה שמסתיימת הלולאה. אבל בפועל, מכיוון שפוליגונים מגדירים אזורים סגורים, אין צורך לציין קבוצת הקואורדינטות. הכלי Maps JavaScript API יושלם באופן אוטומטי הפוליגון על ידי ציור קו שמקשר את המיקום האחרון חזרה למיקום הראשון את המיקום של כל נתיב נתון.

הדוגמה הבאה זהה לזו הקודמת, חוץ שה-LatLng האחרון לא צוין: לצפייה בדוגמה

הסרת פוליגון

כדי להסיר פוליגון מהמפה, יש להפעיל את השיטה setMap() העברת null כארגומנט. בדוגמה הבאה, bermudaTriangle הוא אובייקט פוליגון:

bermudaTriangle.setMap(null);

שימו לב שהשיטה שלמעלה לא מוחקת את הפוליגון. הוא מסיר את הפוליגון מהמפה. כדי למחוק את הפוליגון במקום זאת, צריך להסיר אותו מהמפה ואז להגדיר את את הפוליגון עצמו ל-null.

בדיקת פוליגון

פוליגון מציין את סדרת הקואורדינטות שלו כמערך של מערכים, כאשר כל מערך הוא מסוג MVCArray. כל אחד עלה מערך הוא מערך של LatLng קואורדינטות שמציין נתיב יחיד. כדי לאחזר את הקואורדינטות האלה, קוראים לפונקציה ה-method getPaths() של האובייקט Polygon. מאז מערך הוא MVCArray שצריך לשנות ניתן לבדוק אותו באמצעות הפעולות הבאות:

• הפונקציה getAt() מחזירה את הערך LatLng בערך ערך אינדקס מבוסס אפס.
• insertAt() מכניס LatLng שעבר בערך נתון של אינדקס מבוסס אפס. שימו לב שבכל אחת הקואורדינטות הקיימות בערך האינדקס הזה מועברות קדימה.
• removeAt() מסיר LatLng בכל פעם ערך אינדקס מבוסס אפס.

// 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

// 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

הצבה חור בפוליגון

כדי ליצור שטח ריק בתוך פוליגון, צריך ליצור שני נתיבים: אחד בתוך השני. כדי ליצור את החור, הקואורדינטות מגדירות את החלק הפנימי הנתיב חייב להיות בסדר ההפוך לאלו המגדירים את הנתיב החיצוני. לדוגמה, אם הקואורדינטות של הנתיב החיצוני מופיעות בכיוון השעון אז הנתיב הפנימי חייב להיות נגד כיוון השעון.

הערה: שכבת הנתונים מטפלת בסדר של כדי להשתמש בנתיבים פנימיים וחיצוניים, כך קל יותר לצייר פוליגונים עם חורים. לצפייה מסמכי תיעוד בשכבת הנתונים.

הדוגמה הבאה מציירת פוליגון עם שני נתיבים, עם הנתיב הפנימי נפצעים בכיוון ההפוך לנתיב החיצוני.

// 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

// 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

מלבנים

בנוסף לכיתה כללית בPolygon, מפות Google JavaScript API כולל מחלקה ספציפית עבור Rectangle אובייקטים, כדי לפשט את הבנייה שלהם.

הוספת מלבן

Rectangle דומה ל-Polygon ב- אפשר להגדיר צבעים, משקלים ושקיפות מותאמים אישית עבור קצה מלבן (הקו) וצבעים ושקיפות מותאמים אישית עבור האזור שבתוך מלבן (המילוי). יש לציין את הצבעים ב-HTML מספרי הקסדצימלי

בניגוד ל-Polygon, לא מגדירים paths בשביל Rectangle. במקום זאת, במלבן יש bounds שמגדיר את הצורה שלו באמצעות ציון google.maps.LatLngBounds עבור המלבן.

המאפיין editable של המלבן מציין אם המשתמשים יכולים לערוך את הצורה. ראו כלים ניתנים לעריכה על ידי משתמשים צורות שלמטה. באופן דומה, אפשר להגדיר את המאפיין draggable כדי לאפשר למשתמשים לגרור את המלבן.

// 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

// 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

הקוד הבא יוצר מלבן בכל פעם שהמשתמש משנה את מרחק התצוגה במפה. גודל המלבן נקבע לפי אזור התצוגה.

// 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

// 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

הסרת מלבן

כדי להסיר מלבן מהמפה, יש להפעיל את השיטה setMap() העברת null כארגומנט.

rectangle.setMap(null);

שימו לב שהשיטה שלמעלה לא מוחקת את המלבן. הוא מסיר מהמפה. אם רוצים למחוק את המלבן במקום זאת, צריך להסיר אותו מהמפה ואז להגדיר את המלבן עצמו ל-null.

מעגלים

בנוסף למחלקה הכללית Polygon, מפות Google JavaScript API כולל מחלקה ספציפית עבור Circle אובייקטים, כדי לפשט את הבנייה שלהם.

הוספת מעגל

Circle דומה ל-Polygon בכך שאפשר להגדיר צבעים, משקלים ושקיפות מותאמים אישית עבור קצה המעגל ( קו חוצה) וצבעים ושקיפות מותאמים אישית עבור האזור שבתוך המעגל ( מילוי). יש לציין את הצבעים בסגנון HTML מספרי הקסדצימלי.

בניגוד ל-Polygon, לא מגדירים paths בשביל Circle. במקום זאת, למעגל יש מאפיינים שמגדירים את הצורה שלו:

• center מציין את google.maps.LatLng של מרכז המעגל.
• radius מציין את הרדיוס של המעגל, במטרים.

המאפיין editable של המעגל מציין אם משתמשים יכולים לערוך את הצורה. ראו למטה צורות הניתנות לעריכה על ידי משתמשים. באופן דומה, אפשר להגדיר את המאפיין draggable כדי לאפשר משתמשים כדי לגרור את המעגל.

// 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

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

הסרת מעגל

כדי להסיר מעגל מהמפה, צריך להפעיל את השיטה setMap() העברת null כארגומנט.

circle.setMap(null);

שימו לב שהשיטה שלמעלה לא מוחקת את המעגל. הוא מסיר את העיגול מהמפה. אם במקום זאת ברצונך למחוק את המעגל, צריך להסיר אותו מהמפה ואז להגדיר את מקיפים את עצמו בעיגול אל null.

צורות הניתנות לעריכה ולגרירה על ידי המשתמש

כשיוצרים צורה ניתנת לעריכה מוסיפה לה נקודות אחיזה כדי שאנשים יוכלו להשתמש בהן כדי למקם מחדש, לשנות ולשנות את גודל הצורה ישירות במפה. אפשר גם ליצור צורה שניתנת לגרירה, כדי שאנשים יוכלו להזיז אותה למקום אחר במפה.

שינויים שבוצעו על ידי המשתמש באובייקט לא נשמרים בין סשנים. אם אם רוצים לשמור את שינויי העריכה של המשתמש, עליך לתעד ולאחסן את המידע בעצמך.

הגדרת צורה כניתנת לעריכה

ניתן להגדיר כל צורה (קווים פוליגוניים, מצולעים, מעגלים ומלבנים) למשתמש שאפשר לערוך, על ידי הגדרה של editable כ-true ב- האפשרויות של הצורה.

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

להצגת דוגמה

יצירת צורה שניתנת לגרירה

כברירת מחדל, המיקום של צורה ששורטט על המפה יתוקן. כדי לאפשר למשתמשים לגרור צורה למיקום אחר במפה, להגדיר 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
});

כשמפעילים גרירה בפוליגון או בקו פוליגוני, צריך לשקול גם שהופכים את הפוליגון או הקווים הפוליגוניים לגאודזיים על ידי הגדרת הgeodesic שלהם לנכס true.

מצולע גיאודזי ישמור על צורתו הגיאוגרפית האמיתית כאשר הוא מזיז אותו, וגורמת למצולע להיראות מעוות כאשר הוא זז צפונה או דרומה הקרנת מרקטור. פוליגונים לא גאוגרפיים תמיד ישמרו על האות שמייצגת אותם על המסך.

בקו פוליגוני גיאודזי, החלקים של הקו הפוליגוני משורטטים באופן הבא: הדרך הקצרה ביותר בין שתי נקודות על פני כדור הארץ, בהנחה שכדור הארץ כדור, בניגוד לקווים ישרים בהיטל המרקטור.

למידע נוסף על מערכות קואורדינטות, אפשר לעיין במדריך מפה ומשבצת את הקואורדינטות.

המפה הבאה מציגה שני משולשים באותו גודל, פחות או יותר מאפיינים. התכונה geodesic מוגדרת למשולש האדום true. שימו לב איך הצורה שלו משתנה כשהיא נעה צפונה.

להצגת דוגמה

איך מקשיבים לעריכת אירועים

כאשר מתבצעת עריכה של צורה, אירוע מופעל בסיום העריכה. האלה האירועים מפורטים בהמשך.

כמה קטעי קוד שימושיים:

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.');
});

דוגמה לטיפול באירוע עריכה במלבן: לצפייה בדוגמה.

האזנה לאירועים שגוררים

כשגוררים צורה, האירועים מופעלים בתחילת הגרירה ובסיום הגרירה וגם במהלך הגרירה. האירועים הבאים מופעלים עבור קווים פוליגוניים, מצולעים, מעגלים ומלבנים.

לקבלת מידע נוסף על טיפול באירועים, אפשר לעיין ב מסמכי תיעוד של אירועים.