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

เลือกแพลตฟอร์ม แอนดรอยด์ 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
ดูตัวอย่าง

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

นำเส้นประกอบออก

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

flightPath.setMap(null);

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

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

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

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

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
ดูตัวอย่าง

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

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

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

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

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

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

  • พื้นที่ที่ไม่ต่อเนื่องหลายพื้นที่กำหนดโดยรูปหลายเหลี่ยมรูปเดียว
  • บริเวณที่มีรู
  • สี่แยกของพื้นที่อย่างน้อย 1 แห่ง

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

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

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

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

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

พร็อพเพอร์ตี้ 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
ดูตัวอย่าง

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

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

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

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

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

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

bermudaTriangle.setMap(null);

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

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

รูปหลายเหลี่ยมระบุชุดพิกัดเป็นอาร์เรย์ ที่แต่ละอาร์เรย์เป็นประเภท MVCArray ชิ้น "ใบไม้" อาร์เรย์คืออาร์เรย์ของพิกัด 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
ดูตัวอย่าง

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

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

หากต้องการสร้างพื้นที่ว่างภายในรูปหลายเหลี่ยม คุณจะต้องสร้าง 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
ดูตัวอย่าง

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

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

นอกเหนือจากชั้นเรียน 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
ดูตัวอย่าง

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

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

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
ดูตัวอย่าง

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

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

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

rectangle.setMap(null);

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

วงกลม

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

เพิ่มแวดวง

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

ต่างจากPolygonตรงที่คุณเป็นผู้กำหนด paths ในราคา Circle แต่ในวงกลมจะมีองค์ประกอบ คุณสมบัติที่กำหนดรูปร่างของตัวเอง:

  • 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
ดูตัวอย่าง

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

นำแวดวงออก

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

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

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

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