คุณสามารถเพิ่มรูปทรงต่างๆ ลงในแผนที่ รูปร่างคือวัตถุบนแผนที่ ซึ่งเชื่อมโยงกับพิกัดละติจูด/ลองจิจูด รูปทรงที่ใช้ได้มีดังนี้ เส้น รูปหลายเหลี่ยม วงกลม และสี่เหลี่ยมผืนผ้า นอกจากนี้คุณยังกำหนดค่ารูปร่างเพื่อให้ผู้ใช้แก้ไขหรือลากได้
เส้นประกอบ
หากต้องการวาดเส้นบนแผนที่ ให้ใช้เส้นประกอบ คลาส
Polyline กำหนดภาพซ้อนทับแบบเชิงเส้นของส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ ออบเจ็กต์ Polyline ประกอบด้วยอาร์เรย์ของ
LatLng ตำแหน่ง และสร้างกลุ่มส่วนเส้นที่เชื่อมต่อตำแหน่งเหล่านั้น
ในลำดับตามลำดับ
เพิ่มเส้นประกอบ
ตัวสร้าง Polyline ใช้ชุดของ PolylineOptions ที่ระบุพิกัด LatLng ของเส้นและชุดรูปแบบเพื่อปรับลักษณะการทำงานของเส้น
วัตถุ Polyline จะวาดเป็นกลุ่มของส่วนเส้นตรงบนแผนที่ คุณระบุสี น้ำหนัก และความทึบแสงที่กำหนดเองสำหรับเส้นโครงร่างของเส้นภายใน PolylineOptions ขณะสร้างเส้นได้ หรือจะเปลี่ยนคุณสมบัติเหล่านั้นหลังการก่อสร้างก็ได้
โพลีไลน์รองรับรูปแบบเส้นโครงร่างต่อไปนี้
strokeColorระบุสี HTML เลขฐานสิบหกของรูปแบบ"#FFFFFF"คลาสPolylineไม่รองรับสีที่มีชื่อstrokeOpacityระบุค่าตัวเลขระหว่าง0.0ถึง1.0เพื่อระบุความทึบแสงของสีของเส้น ค่าเริ่มต้นคือ1.0strokeWeightระบุความกว้างของเส้นเป็นพิกเซล
พร็อพเพอร์ตี้ editable ของโพลีไลน์จะระบุว่าผู้ใช้แก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง ในทำนองเดียวกัน คุณอาจตั้งค่าพร็อพเพอร์ตี้ 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;
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;
ลองใช้ตัวอย่าง
นำเส้นประกอบออก
หากต้องการนำโพลีไลน์ออกจากแผนที่ ให้เรียกเมธอด setMap()
ที่ส่งผ่าน null เป็นอาร์กิวเมนต์ ในตัวอย่างต่อไปนี้ flightPath คือออบเจ็กต์โพลีไลน์
flightPath.setMap(null);
โปรดทราบว่าวิธีการข้างต้นไม่ได้เป็นการลบโพลีไลน์ ซึ่งจะนําเส้นประกอบออกจากแผนที่ หากต้องการลบโพลีไลน์ คุณควรนำออกจากแผนที่แล้วตั้งค่าโพลีไลน์เป็น null
ตรวจสอบเส้นประกอบ
โพลีไลน์ระบุชุดพิกัดเป็นอาร์เรย์ของออบเจ็กต์ LatLng พิกัดเหล่านี้จะกำหนดเส้นทางของเส้น
หากต้องการเรียกพิกัด ให้เรียก getPath() ซึ่งจะแสดงผลอาร์เรย์ประเภท MVCArray คุณจัดการและตรวจสอบอาร์เรย์ได้โดยใช้การดำเนินการต่อไปนี้
getAt()จะแสดงผลLatLngที่ค่าดัชนีแบบฐาน 0 ที่ระบุinsertAt()แทรกLatLngที่ส่งผ่านที่ค่าดัชนีแบบเป็นศูนย์ที่กำหนด โปรดทราบว่าพิกัดที่มีอยู่ที่ค่าดัชนีนั้นจะเลื่อนไปข้างหน้าremoveAt()จะนำLatLngออกที่ค่าดัชนีแบบเป็นศูนย์ที่ระบุ
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;
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;
ลองใช้ตัวอย่าง
ปรับแต่งเส้นประกอบ
คุณสามารถเพิ่มรูปภาพแบบเวกเตอร์ลงในเส้นประกอบในรูปแบบของสัญลักษณ์ได้ การใช้สัญลักษณ์ร่วมกับคลาส PolylineOptions จะช่วยให้คุณควบคุมรูปลักษณ์ของเส้นประกอบบนแผนที่ได้เป็นอย่างมาก
ดูข้อมูลเกี่ยวกับarrows เส้นประ สัญลักษณ์ที่กำหนดเอง และสัญลักษณ์แบบเคลื่อนไหวได้ในสัญลักษณ์
รูปหลายเหลี่ยม
รูปหลายเหลี่ยมแสดงถึงพื้นที่ที่ล้อมรอบด้วยเส้นทางปิด (หรือลูป) ซึ่งระบุโดยชุดพิกัด
ออบเจ็กต์
Polygon คล้ายกับออบเจ็กต์ Polyline ตรงที่ประกอบด้วยชุดพิกัดตามลำดับที่เรียงกัน
รูปหลายเหลี่ยมจะวาดโดยใช้เส้นโครงร่างและการเติมสี คุณกำหนดสี น้ำหนัก และความทึบแสงที่กำหนดเองสำหรับขอบของรูปหลายเหลี่ยม (เส้นโครงร่าง) รวมถึงสีและความทึบแสงที่กำหนดเองสำหรับพื้นที่ปิด (การเติมสี) ได้ ควรระบุสีในรูปแบบ HTML ในเลขฐานสิบหก ระบบไม่รองรับชื่อสี
วัตถุ Polygon ชิ้นสามารถอธิบายรูปทรงที่ซับซ้อนได้ เช่น
- พื้นที่ที่ไม่ต่อเนื่องหลายพื้นที่ซึ่งกำหนดด้วยรูปหลายเหลี่ยม 1 รูป
- บริเวณที่มีรู
- สี่แยกของพื้นที่ 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;
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;
ลองใช้ตัวอย่าง
การเติมรูปหลายเหลี่ยมอัตโนมัติ
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ที่ส่งผ่านที่ค่าดัชนีแบบเป็นศูนย์ที่กำหนด โปรดทราบว่าพิกัดที่มีอยู่ที่ค่าดัชนีนั้นจะเลื่อนไปข้างหน้าremoveAt()จะนำLatLngออกที่ค่าดัชนีแบบเป็นศูนย์ที่ระบุ
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;
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;
ลองใช้ตัวอย่าง
วางรูในรูปหลายเหลี่ยม
หากต้องการสร้างพื้นที่ว่างภายในรูปหลายเหลี่ยม คุณต้องสร้างเส้นทาง 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;
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;
ลองใช้ตัวอย่าง
สี่เหลี่ยมผืนผ้า
นอกเหนือจากคลาส 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;
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;
ลองใช้ตัวอย่าง
โค้ดต่อไปนี้จะสร้างสี่เหลี่ยมผืนผ้าทุกครั้งที่ผู้ใช้เปลี่ยนการซูมบนแผนที่ ขนาดของสี่เหลี่ยมผืนผ้าจะกำหนดโดยวิวพอร์ต
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;
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;
ลองใช้ตัวอย่าง
นำสี่เหลี่ยมผืนผ้าออก
หากต้องการนำสี่เหลี่ยมผืนผ้าออกจากแผนที่ ให้เรียกเมธอด 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
// 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;
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;
ลองใช้ตัวอย่าง
นำแวดวงออก
หากต้องการนำวงกลมออกจากแผนที่ ให้เรียกเมธอด 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_changedcenter_changed
|
| รูปหลายเหลี่ยม |
insert_atremove_atset_at
Listener ต้องได้รับการตั้งค่าบนเส้นทางของรูปหลายเหลี่ยม หากรูปหลายเหลี่ยมมีหลายเส้นทาง คุณต้องตั้งค่า Listener ในแต่ละเส้นทาง |
| เส้นประกอบ |
insert_atremove_atset_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 |
เริ่มทำงานเมื่อผู้ใช้หยุดลากรูปร่าง |
ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์ได้ในเอกสารประกอบเกี่ยวกับเหตุการณ์