คุณสามารถเพิ่มรูปร่างต่างๆ ลงในแผนที่ได้ รูปร่างคือวัตถุบนแผนที่ ซึ่งเชื่อมโยงกับพิกัดละติจูด/ลองจิจูด มีรูปร่างต่อไปนี้ เส้น, รูปหลายเหลี่ยม, วงกลม และสี่เหลี่ยมผืนผ้า นอกจากนี้ คุณยังกำหนดค่ารูปร่างเพื่อให้ผู้ใช้แก้ไขหรือลากได้
เส้นประกอบ
หากต้องการวาดเส้นบนแผนที่ ให้ใช้เส้นประกอบ คลาส
Polyline
กำหนดการวางซ้อนเชิงเส้นของส่วนของเส้นที่เชื่อมต่อบนแผนที่ ออบเจ็กต์ Polyline
ประกอบด้วยอาร์เรย์ของตำแหน่ง LatLng
และสร้างกลุ่มของเส้นที่เชื่อมต่อตำแหน่งเหล่านั้นตามลำดับ
เพิ่มเส้นประกอบ
ตัวสร้าง Polyline
ใช้ชุดของ PolylineOptions
ที่ระบุพิกัด LatLng
ของเส้นและชุดรูปแบบเพื่อปรับลักษณะการมองเห็นของเส้นประกอบ
วัตถุ Polyline
ชิ้นถูกวาดเป็นกลุ่มของเส้นตรงบนแผนที่ คุณระบุสี น้ำหนัก และความทึบแสงที่กำหนดเองสำหรับเส้นโครงร่างของเส้นภายใน PolylineOptions
ขณะสร้างเส้นได้ หรือจะเปลี่ยนคุณสมบัติเหล่านี้หลังการสร้างก็ได้
เส้นประกอบรองรับรูปแบบเส้นโครงร่างต่อไปนี้
strokeColor
ระบุสี HTML เลขฐานสิบหกของรูปแบบ"#FFFFFF"
คลาสPolyline
ไม่รองรับสีที่มีชื่อstrokeOpacity
ระบุค่าตัวเลขระหว่าง0.0
ถึง1.0
เพื่อกำหนดความทึบแสงของสีของเส้น โดยมีค่าเริ่มต้นเป็น1.0
strokeWeight
ระบุความกว้างของเส้นในหน่วยพิกเซล
พร็อพเพอร์ตี้ 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
ที่ส่งผ่านค่าดัชนีแบบ 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;
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 แห่ง
หากต้องการกำหนดรูปร่างที่ซับซ้อน ให้ใช้รูปหลายเหลี่ยมที่มีหลายเส้นทาง
หมายเหตุ: ชั้นข้อมูลจะแสดงวิธีง่ายๆ ในการวาดรูปหลายเหลี่ยม โดยจะจัดการการขดลวดรูปหลายเหลี่ยมให้คุณ ทำให้วาดรูปหลายเหลี่ยมที่มีรูได้ง่ายขึ้น ดูเอกสารประกอบสำหรับชั้นข้อมูล
เพิ่มรูปหลายเหลี่ยม
เนื่องจากพื้นที่รูปหลายเหลี่ยมอาจมีเส้นทางแยกกันหลายเส้นทาง พร็อพเพอร์ตี้ 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
ที่ส่งผ่านค่าดัชนีแบบ 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;
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
ทั่วไปแล้ว JavaScript API ของ Google Maps ยังมีคลาสเฉพาะสำหรับออบเจ็กต์
Rectangle
ด้วยเพื่อลดความซับซ้อนในการสร้าง
เพิ่มสี่เหลี่ยมผืนผ้า
Rectangle
คล้ายกับ Polygon
ตรงที่คุณสามารถกำหนดสี น้ำหนัก และความทึบแสงที่กำหนดเองสำหรับขอบของสี่เหลี่ยมผืนผ้า (เส้นโครงร่าง) รวมถึงสีและความทึบแสงที่กำหนดเองสำหรับพื้นที่ภายในสี่เหลี่ยมผืนผ้า (สีเติม) ได้ สีควรระบุในรูปแบบ HTML ที่เป็นตัวเลขฐาน 16
ต่างจาก 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;
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
ทั่วไปแล้ว JavaScript API ของ Google Maps ยังมีคลาสเฉพาะสำหรับออบเจ็กต์
Circle
ด้วยเพื่อลดความซับซ้อนในการสร้าง
เพิ่มแวดวง
Circle
คล้ายกับ Polygon
ในเรื่องที่คุณกําหนดสี น้ำหนัก และความทึบแสงที่กําหนดเองสําหรับขอบของวงกลม (เส้นโครงร่าง) รวมถึงสีและความทึบแสงที่กําหนดเองสําหรับพื้นที่ภายในวงกลมได้ (สีเติม) สีควรระบุในรูปแบบ HTML ที่เป็นตัวเลขฐาน 16
ต่างจาก Polygon
ตรงที่คุณไม่ต้องกำหนด paths
สำหรับ Circle
แต่วงกลมจะมีคุณสมบัติเพิ่มเติมอีก 2 รายการซึ่งเป็นตัวกำหนดรูปร่าง ดังนี้
center
ระบุgoogle.maps.LatLng
ของศูนย์กลางวงกลมradius
ระบุรัศมีของวงกลม หน่วยเป็นเมตร
พร็อพเพอร์ตี้ editable
ของแวดวงจะระบุว่าผู้ใช้แก้ไขรูปร่างได้หรือไม่ ดูรูปร่างที่ผู้ใช้แก้ไขได้ด้านล่าง
ในทำนองเดียวกัน คุณตั้งค่าพร็อพเพอร์ตี้ draggable
เพื่ออนุญาตให้ผู้ใช้ลากวงกลมได้
TypeScript
// This example creates circles on the map, representing populations in North // America. // First, create an object containing LatLng and population for each city. interface City { center: google.maps.LatLngLiteral; population: number; } const citymap: Record<string, City> = { chicago: { center: { lat: 41.878, lng: -87.629 }, population: 2714856, }, newyork: { center: { lat: 40.714, lng: -74.005 }, population: 8405837, }, losangeles: { center: { lat: 34.052, lng: -118.243 }, population: 3857799, }, vancouver: { center: { lat: 49.25, lng: -123.1 }, population: 603502, }, }; function initMap(): void { // Create the map. const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: 37.09, lng: -95.712 }, mapTypeId: "terrain", } ); // Construct the circle for each value in citymap. // Note: We scale the area of the circle based on the population. for (const city in citymap) { // Add the circle for this city to the map. const cityCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 100, }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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_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 |
เริ่มทำงานเมื่อผู้ใช้หยุดลากรูปร่าง |
ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์ได้ในเอกสารประกอบเกี่ยวกับเหตุการณ์