รูปร่างและเส้น

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

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

เส้นประกอบ

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

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

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

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

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

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

ตัวอย่างนี้สร้างเส้นหลายเส้นสีแดงที่มีความกว้าง 2 พิกเซล ซึ่งแสดงเส้นทางของ เที่ยวบินข้ามมหาสมุทรแปซิฟิกเที่ยวแรกระหว่างโอคแลนด์ แคลิฟอร์เนีย และบริสเบน ออสเตรเลีย

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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

นำโพลีไลน์ออก

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

flightPath.setMap(null);

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

ตรวจสอบโพลีไลน์

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

• getAt() จะแสดงผล LatLng ที่ดัชนีที่อิงตามศูนย์ที่ระบุ
• insertAt() จะแทรก LatLng ที่ส่งผ่านที่ค่าดัชนีแบบ 0 ที่ระบุ โปรดทราบว่าระบบจะย้ายพิกัดที่มีอยู่ ที่ค่าดัชนีนั้นไปข้างหน้า
• removeAt() จะนำ LatLng ออกที่ดัชนีที่อิงตามศูนย์ที่ระบุ

หมายเหตุ: คุณไม่สามารถดึงข้อมูล องค์ประกอบที่ 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

ปรับแต่งเส้นประกอบ

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

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

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

ออบเจ็กต์ Polygon สามารถอธิบายรูปร่างที่ซับซ้อนได้ ซึ่งรวมถึง

• พื้นที่ที่ไม่ต่อเนื่องหลายแห่งซึ่งกำหนดโดยรูปหลายเหลี่ยมเดียว
• พื้นที่ที่มีรู
• จุดตัดของพื้นที่อย่างน้อย 1 แห่ง

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

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

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

เนื่องจากพื้นที่รูปหลายเหลี่ยมอาจมีเส้นทางแยกกันหลายเส้น พร็อพเพอร์ตี้ 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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

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

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

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

bermudaTriangle.setMap(null);

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

การนำรูปหลายเหลี่ยมออกจะคล้ายกับการนำโพลีไลน์ออก หากต้องการดู โค้ดที่ทำงานสำหรับเส้นหลายเส้น ให้ดูตัวอย่าง

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

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

• getAt() จะแสดงผล LatLng ที่ดัชนีที่อิงตามศูนย์ที่ระบุ
• insertAt() จะแทรก LatLng ที่ส่งผ่านที่ค่าดัชนีแบบ 0 ที่ระบุ โปรดทราบว่าระบบจะย้ายพิกัดที่มีอยู่ ที่ค่าดัชนีนั้นไปข้างหน้า
• removeAt() จะนำ LatLng ออกที่ดัชนีที่อิงตามศูนย์ที่ระบุ

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

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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

เจาะรูในรูปหลายเหลี่ยม

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

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

ตัวอย่างต่อไปนี้วาดรูปหลายเหลี่ยมที่มี 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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

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

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

คุณไม่ต้องกำหนด paths สำหรับ Rectangle ซึ่งต่างจาก Polygon แต่สี่เหลี่ยมผืนผ้ามีพร็อพเพอร์ตี้ 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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

rectangle.setMap(null);

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

การนำสี่เหลี่ยมผืนผ้าออกจะคล้ายกับการนำเส้นหลายส่วนออก หากต้องการ ดูโค้ดที่ใช้งานจริงสำหรับเส้นหลายส่วน ให้ดูตัวอย่าง

วงกลม

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

เพิ่มแวดวง

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

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

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

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

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

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

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

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

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

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.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 google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // 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', (event) => {
            const target = event.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;
        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();
    });
}
initMap();
index.js

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;
}
style.css

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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>
index.html

ดูตัวอย่าง

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

JSFiddle.net

นำแวดวงออก

หากต้องการนำวงกลมออกจากแผนที่ ให้เรียกใช้เมธอด 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 ด้วยการตั้งค่าพร็อพเพอร์ตี้ geodesic เป็น true

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับระบบพิกัดได้ที่คู่มือเกี่ยวกับ พิกัดแผนที่และไทล์

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

ดูตัวอย่าง

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

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

รูปร่าง	กิจกรรม
วงกลม	radius_changed center_changed
รูปหลายเหลี่ยม	insert_at remove_at set_at ต้องตั้งค่า Listener บนเส้นทางของรูปหลายเหลี่ยม หากรูปหลายเหลี่ยมมี หลายเส้นทาง คุณต้องตั้งค่า Listener ในแต่ละเส้นทาง
เส้นประกอบ	insert_at remove_at set_at ต้องตั้งค่า Listener ในเส้นทางของ Polyline
สี่เหลี่ยมผืนผ้า	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	เริ่มทำงานเมื่อผู้ใช้หยุดลากรูปร่าง

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