หน้านี้ได้รับการแปลโดย Cloud Translation API

รูปทรง

เลือกแพลตฟอร์ม: Android iOS JavaScript

คุณสามารถเพิ่มรูปร่างได้หลายแบบในแผนที่ของคุณ รูปร่างคือวัตถุบนแผนที่ เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด มีรูปร่างต่อไปนี้ เส้น, รูปหลายเหลี่ยม, วงกลม และสี่เหลี่ยมผืนผ้า คุณยังกําหนดค่ารูปร่างเพื่อให้ผู้ใช้แก้ไขหรือลากรูปร่างเหล่านั้นได้ด้วย

เส้นประกอบ

หากต้องการวาดเส้นบนแผนที่ ให้ใช้โพลีไลน์ คลาส Polyline กําหนดการวางซ้อนเชิงเส้นของส่วนเส้นที่เชื่อมต่อบนแผนที่ ออบเจ็กต์ Polyline ประกอบด้วยอาร์เรย์ของตําแหน่ง LatLng และสร้างชุดกลุ่มเส้นที่เชื่อมต่อสถานที่ตั้งเหล่านั้นตามลําดับที่สั่งซื้อ

เพิ่มโพลีไลน์

ตัวสร้าง Polyline จะใช้ชุด PolylineOptions ที่ระบุพิกัด LatLng ของเส้นและชุดรูปแบบเพื่อปรับพฤติกรรมของภาพของเส้นประกอบ

วาด Polyline วัตถุเป็นชุดส่วนของเส้นตรงบนแผนที่ คุณระบุสี น้ําหนัก และความทึบแสงที่กําหนดเองสําหรับเส้นโครงร่าง ของเส้นภายใน PolylineOptions ได้เมื่อสร้างเส้น หรือคุณเปลี่ยนคุณสมบัติเหล่านั้นได้หลังจากที่ก่อสร้าง โพลีไลน์รองรับรูปแบบเส้นโครงร่างต่อไปนี้

strokeColor ระบุสี HTML เลขฐานสิบหกในรูปแบบ "#FFFFFF" คลาส Polyline ไม่รองรับสีที่มีชื่อ
strokeOpacity ระบุค่าตัวเลขระหว่าง 0.0 ถึง 1.0 เพื่อระบุความทึบของสีเส้น ค่าเริ่มต้นคือ 1.0
strokeWeight ระบุความกว้างของเส้นเป็นพิกเซล

พร็อพเพอร์ตี้ editable ของ Polyline ระบุว่าผู้ใช้จะแก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง ในทํานองเดียวกัน คุณอาจตั้งค่าพร็อพเพอร์ตี้ draggable เพื่ออนุญาตให้ผู้ใช้ลากบรรทัดได้ด้วย

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

นําโพลีไลน์ออก

หากต้องการนําเส้นประกอบออกจากแผนที่ ให้เรียกใช้เมธอด setMap() ที่ส่ง null เป็นอาร์กิวเมนต์ ในตัวอย่างต่อไปนี้ flightPath เป็นออบเจ็กต์โพลีไลน์

flightPath.setMap(null);

โปรดทราบว่าวิธีข้างต้นจะไม่ลบโพลีไลน์ จะนําโพลีไลน์ออกจากแผนที่ หากต้องการลบเส้นประกอบ คุณก็ควรนําเส้นออกจากแผนที่ แล้วตั้งค่าเส้นประกอบเป็น null

ตรวจสอบเส้นประกอบ

โพลีไลน์จะระบุชุดพิกัดเป็นอาร์เรย์ของออบเจ็กต์ LatLng พิกัดเหล่านี้จะกําหนดเส้นทางของเส้น หากต้องการเรียกพิกัด ให้เรียก getPath() ซึ่งจะแสดงผลอาร์เรย์ประเภท MVCArray คุณจัดการและตรวจสอบอาร์เรย์ได้โดยใช้การดําเนินการต่อไปนี้

getAt() จะแสดงผล LatLng ที่ค่าดัชนี 0 ที่ระบุ
insertAt() จะแทรก LatLng ที่ผ่านไปแล้วในค่าดัชนี 0 ที่ระบุ โปรดทราบว่าระบบจะเลื่อนพิกัดที่มีอยู่ในค่าดัชนีนั้นต่อไป
removeAt() นํา LatLng ออกที่ค่าดัชนี 0 ที่ระบุ

หมายเหตุ: คุณจะเรียกองค์ประกอบ i ของอาร์เรย์โดยใช้ไวยากรณ์ไม่ได้ mvcArray[i] คุณต้องใช้ mvcArray.getAt(i)

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

ปรับแต่งโพลีไลน์

คุณเพิ่มรูปภาพแบบเวกเตอร์ลงในเส้นประกอบในรูปแบบสัญลักษณ์ได้ ด้วยการรวมสัญลักษณ์และคลาส PolylineOptions เข้าด้วยกัน คุณจึงควบคุมรูปลักษณ์ของ Polyline บนแผนที่ได้มากมาย ดูข้อมูลเกี่ยวกับลูกศร เส้นประ สัญลักษณ์ที่กําหนดเอง และสัญลักษณ์เคลื่อนไหวได้จากสัญลักษณ์

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมแสดงพื้นที่ที่ล้อมรอบด้วยเส้นทางปิด (หรือลูป) ซึ่งกําหนดด้วยชุดพิกัด ออบเจ็กต์ Polygon คล้ายกับออบเจ็กต์ Polyline ตรงที่ประกอบไปด้วยชุดพิกัดในลําดับที่เรียงกัน รูปหลายเหลี่ยมวาดด้วยเส้นโครงร่างและการเติมสี คุณอาจกําหนดสี น้ําหนัก และความทึบแสงที่กําหนดเองสําหรับขอบรูปหลายเหลี่ยม (เส้นโครงร่าง) สีและความทึบแสงที่กําหนดเองสําหรับพื้นที่ที่ล้อมรอบ (การเติมสี) ควรระบุสีในรูปแบบ HTML เลขฐานสิบหก ไม่รองรับชื่อสี

วัตถุ Polygon เพื่ออธิบายรูปร่างที่ซับซ้อนได้ เช่น

พื้นที่ที่ไม่ต่อเนื่องกันซึ่งกําหนดด้วยรูปหลายเหลี่ยมรูปเดียว
บริเวณที่มีรู
สี่แยกของพื้นที่อย่างน้อยหนึ่งบริเวณ

หากต้องการกําหนดรูปร่างที่ซับซ้อน คุณต้องใช้รูปหลายเหลี่ยมที่มีหลายเส้นทาง

หมายเหตุ: ชั้นข้อมูลมอบวิธีที่ง่ายในการวาดรูปหลายเหลี่ยม ซึ่งจะช่วยจัดการรูปหลายเหลี่ยมให้คดเคี้ยว และช่วยให้วาดรูปหลายเหลี่ยมได้ง่ายขึ้น ดูเอกสารประกอบเกี่ยวกับชั้นข้อมูล

เพิ่มรูปหลายเหลี่ยม

เนื่องจากพื้นที่รูปหลายเหลี่ยมอาจมีเส้นทางแยกกันหลายเส้นทาง พร็อพเพอร์ตี้ paths ของออบเจ็กต์ Polygon จึงระบุอาร์เรย์ของอาร์เรย์แต่ละประเภท MVCArray อาร์เรย์แต่ละรายการจะกําหนดลําดับพิกัดที่แยกกัน LatLng ลําดับ

สําหรับรูปหลายเหลี่ยมแบบเรียบง่ายที่ประกอบด้วยเส้นทางเดียว คุณจะสร้าง Polygon โดยใช้อาร์เรย์เดียวของพิกัด LatLng ได้ Maps JavaScript API จะแปลงอาร์เรย์แบบง่ายเป็นอาร์เรย์ของอาร์เรย์ขณะสร้างอาร์เรย์ภายในพร็อพเพอร์ตี้ paths API นําเสนอเมธอด getPath() แบบง่ายสําหรับรูปหลายเหลี่ยมซึ่งประกอบด้วยเส้นทางเดียว

หมายเหตุ: หากสร้างรูปหลายเหลี่ยมแบบง่ายในลักษณะนี้ คุณจะยังต้องดึงค่าจากรูปหลายเหลี่ยมด้วยการปรับเปลี่ยนเส้นทางเป็น MVCArray

พร็อพเพอร์ตี้ editable ของรูปหลายเหลี่ยมจะระบุว่าผู้ใช้แก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง ในทํานองเดียวกัน คุณตั้งค่าพร็อพเพอร์ตี้ draggable เพื่ออนุญาตให้ผู้ใช้ลากรูปร่างได้

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

การเติมรูปหลายเหลี่ยมอัตโนมัติ

Polygon ในตัวอย่างด้านบนประกอบด้วยพิกัด LatLng ชุด 4 ชุด แต่สังเกตว่าชุดแรกและชุดสุดท้ายเป็นตําแหน่งเดียวกัน ซึ่งจะวนซ้ําให้เสร็จเรียบร้อย แต่ในทางปฏิบัติ เนื่องจากรูปหลายเหลี่ยมจะกําหนดพื้นที่ปิด คุณไม่จําเป็นต้องระบุชุดพิกัดสุดท้าย Maps JavaScript API จะ เติมรูปหลายเหลี่ยมโดยอัตโนมัติโดยการวาดเส้นโครงร่างเพื่อเชื่อมต่อตําแหน่งสุดท้ายกลับไปยัง ตําแหน่งแรกสําหรับเส้นทางใดๆ

ตัวอย่างต่อไปนี้เหมือนกับตัวอย่างก่อนหน้าทุกประการ เว้นแต่ LatLng จะถูกละเว้น: ดูตัวอย่าง

นํารูปหลายเหลี่ยมออก

หากต้องการนํารูปหลายเหลี่ยมออกจากแผนที่ ให้เรียกเมธอด setMap() ที่ส่ง null เป็นอาร์กิวเมนต์ ในตัวอย่างต่อไปนี้ bermudaTriangle เป็นออบเจ็กต์รูปหลายเหลี่ยม

bermudaTriangle.setMap(null);

โปรดทราบว่าวิธีข้างต้นจะไม่ลบรูปหลายเหลี่ยม นํารูปหลายเหลี่ยมออกจากแผนที่ หากต้องการลบรูปหลายเหลี่ยม คุณควรนํารูปหลายเหลี่ยมนั้นออกจากแผนที่ แล้วตั้งค่ารูปหลายเหลี่ยมเป็น null

ตรวจสอบรูปหลายเหลี่ยม

รูปหลายเหลี่ยมระบุชุดพิกัดของอาร์เรย์เป็นอาร์เรย์ของอาร์เรย์ โดยที่แต่ละอาร์เรย์เป็นประเภท MVCArray อาร์เรย์ "leaf" แต่ละรายการคืออาร์เรย์ของพิกัด LatLng ที่ระบุเส้นทางเดียว หากต้องการเรียกพิกัดเหล่านี้ ให้เรียกเมธอด getPaths() ของออบเจ็กต์ Polygon เนื่องจากอาร์เรย์เป็น MVCArray คุณจะต้องจัดการและตรวจสอบอาร์เรย์โดยใช้การดําเนินการต่อไปนี้

getAt() จะแสดงผล LatLng ที่ค่าดัชนี 0 ที่ระบุ
insertAt() จะแทรก LatLng ที่ผ่านไปแล้วในค่าดัชนี 0 ที่ระบุ โปรดทราบว่าระบบจะเลื่อนพิกัดที่มีอยู่ในค่าดัชนีนั้นต่อไป
removeAt() นํา LatLng ออกที่ค่าดัชนี 0 ที่ระบุ

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

วางรูบนรูปหลายเหลี่ยม

หากต้องการสร้างพื้นที่ว่างภายในรูปหลายเหลี่ยม คุณต้องสร้างเส้นทาง 2 เส้นทาง โดยเส้นทางแรกอยู่ภายในอีกเส้นหนึ่ง ในการสร้างรู พิกัดที่กําหนดเส้นทางภายในต้องอยู่ในลําดับที่ตรงกันข้ามกับเส้นทางภายใน เช่น หากพิกัดของเส้นทางภายนอกเรียงตามทวนเข็มนาฬิกา เส้นทางภายในต้องเป็นทวนเข็มนาฬิกา

หมายเหตุ: ชั้นข้อมูลจะจัดการลําดับของเส้นทางภายในและด้านนอกให้คุณวาดรูปหลายเหลี่ยมด้วยรูได้ง่ายขึ้น ดูเอกสารประกอบเกี่ยวกับชั้นข้อมูล

ตัวอย่างต่อไปนี้วาดรูปหลายเหลี่ยมที่มี 2 เส้นทาง โดยวาดเส้นทางภายในเป็นทิศทางตรงข้ามกับเส้นทางภายนอก

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

สี่เหลี่ยมผืนผ้า

นอกเหนือจากคลาส Polygon ทั่วไปแล้ว Google Maps JavaScript API ยังมีคลาสที่เฉพาะเจาะจงสําหรับออบเจ็กต์ Rectangle ด้วยเพื่อให้สร้างได้ง่ายขึ้น

เพิ่มสี่เหลี่ยมผืนผ้า

Rectangle คล้ายกับ Polygon ซึ่งคุณสามารถกําหนดสี น้ําหนัก และความทึบแสงที่กําหนดเองสําหรับขอบของสี่เหลี่ยมผืนผ้า (เส้นโครงร่าง) ตลอดจนสีและความทึบแสงที่กําหนดเองสําหรับบริเวณภายในสี่เหลี่ยมผืนผ้า (การเติม) ควรระบุสีในรูปแบบ HTML ที่เป็นตัวเลขฐานสิบหก

สิ่งที่แตกต่างจาก Polygon คือคุณไม่ต้องกําหนด paths ให้กับ Rectangle รูปสี่เหลี่ยมผืนผ้ามีพร็อพเพอร์ตี้ bounds ที่กําหนดรูปร่างโดยระบุ google.maps.LatLngBounds สําหรับสี่เหลี่ยมผืนผ้าแทน

พร็อพเพอร์ตี้ editable ของสี่เหลี่ยมผืนผ้าจะระบุว่าผู้ใช้แก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง ในทํานองเดียวกัน คุณตั้งค่าพร็อพเพอร์ตี้ draggable เพื่ออนุญาตให้ผู้ใช้ลากสี่เหลี่ยมผืนผ้าได้

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

โค้ดต่อไปนี้จะสร้างสี่เหลี่ยมผืนผ้าทุกครั้งที่ผู้ใช้เปลี่ยนการซูมบนแผนที่ วิวพอร์ตต้องกําหนดขนาดของสี่เหลี่ยมผืนผ้า

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

นําสี่เหลี่ยมผืนผ้าออก

หากต้องการนําสี่เหลี่ยมผืนผ้าออกจากแผนที่ ให้เรียกเมธอด setMap() ที่ส่ง null เป็นอาร์กิวเมนต์

rectangle.setMap(null);

โปรดทราบว่าวิธีข้างต้นจะไม่ลบรูปสี่เหลี่ยม จะนําสี่เหลี่ยมผืนผ้าออกจากแผนที่ หากต้องการลบรูปสี่เหลี่ยมผืนผ้า ให้นํารูปนั้นออกจากแผนที่ แล้วตั้งค่ารูปสี่เหลี่ยมเป็น null

วงกลม

นอกเหนือจากคลาส Polygon ทั่วไปแล้ว Google Maps JavaScript API ยังมีคลาสที่เฉพาะเจาะจงสําหรับออบเจ็กต์ Circle ด้วยเพื่อให้สร้างได้ง่ายขึ้น

เพิ่มแวดวง

Circle คล้ายกับ Polygon ตรงที่คุณสามารถกําหนดสี น้ําหนัก และความทึบแสงที่กําหนดเองสําหรับขอบของวงกลม (เส้นโครงร่าง) ตลอดจนสีและความทึบแสงที่กําหนดเองสําหรับบริเวณภายในวงกลม (การเติมสี) ได้ ควรระบุสีในรูปแบบ HTML ที่เป็นตัวเลขฐานสิบหก

สิ่งที่แตกต่างจาก Polygon คือคุณไม่ต้องกําหนด paths ให้กับ Circle แต่วงกลมจะมีพร็อพเพอร์ตี้เพิ่มเติม 2 รายการที่กําหนดรูปร่าง ได้แก่

center ระบุ google.maps.LatLng ของจุดกึ่งกลางของวงกลม
radius ระบุรัศมีของวงกลมเป็นเมตร

พร็อพเพอร์ตี้ editable ของแวดวงจะระบุว่าผู้ใช้แก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง ในทํานองเดียวกัน คุณสามารถตั้งค่าพร็อพเพอร์ตี้ draggable เพื่ออนุญาตให้ผู้ใช้ลากแวดวงได้

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

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net CodeSandbox.io Google Cloud Shell

นําแวดวงออก

หากต้องการนําวงกลมออกจากแผนที่ ให้เรียกเมธอด 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

รูปหลายเหลี่ยมทรงกลมจะคงรูปร่างทางภูมิศาสตร์ที่แท้จริงไว้เมื่อมีการย้าย ทําให้รูปหลายเหลี่ยมบิดเบี้ยวในขณะที่เคลื่อนที่เหนือหรือใต้ในการฉายภาพ Mercator รูปหลายเหลี่ยมที่ไม่ใช่ภูมิศาสตร์จะรักษาลักษณะเริ่มต้นบนหน้าจอเสมอ

ในโพลีไลน์ทางภูมิศาสตร์ กลุ่มของโพลีไลน์จะถูกวาดเป็นเส้นทางที่สั้นที่สุดระหว่างจุด 2 จุดบนพื้นผิวโลก โดยมีสมมติฐานว่าโลกนี้เป็นทรงกลมแทนที่จะเป็นเส้นตรงในเส้นโครงเมอร์เคเตอร์

สําหรับข้อมูลเพิ่มเติมเกี่ยวกับระบบพิกัด โปรดดูที่คู่มือแผนที่และพิกัดแบบแยกชิ้นส่วน

แผนที่ต่อไปนี้แสดงรูปสามเหลี่ยม 2 รูปที่มีขนาดและมิติข้อมูลเท่ากันโดยประมาณ สามเหลี่ยมสีแดงมีการตั้งค่าพร็อพเพอร์ตี้ geodesic เป็น true โปรดสังเกตว่ารูปร่างเปลี่ยนแปลงไปเมื่อเลื่อนไปทางทิศเหนือ

ดูตัวอย่าง

ฟังการแก้ไขเหตุการณ์

เมื่อแก้ไขรูปร่างแล้ว เหตุการณ์จะเริ่มทํางานเมื่อมีการแก้ไขเสร็จสมบูรณ์ เหตุการณ์เหล่านี้แสดงไว้ด้านล่าง

รูปร่าง	กิจกรรม
วงกลม	`radius_changed` `center_changed`
รูปหลายเหลี่ยม	`insert_at` `remove_at` `set_at` ต้องตั้งค่า Listener บนเส้นทางของรูปหลายเหลี่ยม หากรูปหลายเหลี่ยมมีหลายเส้นทาง ต้องตั้งค่า Listener ในแต่ละเส้นทาง
เส้นประกอบ	`insert_at` `remove_at` `set_at` ต้องตั้งค่า Listener บนเส้นทางของโพลีไลน์
สี่เหลี่ยมผืนผ้า	`bounds_changed`

ตัวอย่างข้อมูลโค้ดที่มีประโยชน์:

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

ดูตัวอย่างการจัดการกิจกรรมการแก้ไขในสี่เหลี่ยมผืนผ้า ดูตัวอย่าง

ฟังเหตุการณ์ที่กําลังลาก

เมื่อมีการลากรูปร่าง เหตุการณ์จะเริ่มทํางานเมื่อเริ่มต้นและจบการดําเนินการที่ลาก รวมทั้งระหว่างการลาก เหตุการณ์ต่อไปนี้จะเริ่มทํางานสําหรับรูปหลายเหลี่ยม รูปหลายเหลี่ยม วงกลม และสี่เหลี่ยมผืนผ้า

เหตุการณ์	คำอธิบาย
`dragstart`	เริ่มทํางานเมื่อผู้ใช้เริ่มลากรูปร่าง
`drag`	เริ่มทํางานซ้ําๆ ขณะที่ผู้ใช้ลากรูปร่าง
`dragend`	เริ่มทํางานเมื่อผู้ใช้หยุดลากรูปร่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์ได้ในเอกสารประกอบเกี่ยวกับเหตุการณ์