يمكنك إضافة أشكال مختلفة إلى خريطتك. الشكل هو كائن على الخريطة، مرتبط بإحداثي خط العرض/الطول. تتوفّر الأشكال التالية: الخطوط والمضلّعات والدوائر والمستطيلات. يمكنك أيضًا ضبط الأشكال لكي يتمكّن المستخدمون من تعديلها أو سحبها.
الخطوط المتعددة
لرسم خط على الخريطة، استخدم أحد الخطوط المتعددة. تحدد الفئة
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
في قيمة فهرس معيّنة تستند إلى صفر. - تُدرِج السمة
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
وصف أشكال معقدة، بما في ذلك:
- مناطق متعددة غير متجاورة يحددها مضلّع واحد.
- المناطق التي تحتوي على ثقوب
- تقاطعات منطقة واحدة أو أكثر.
لتحديد شكل معقد، يمكنك استخدام مضلّع به مسارات متعددة.
ملاحظة: توفّر طبقة البيانات طريقة بسيطة لرسم المضلّعات. تعالج هذه الميزة ملفات المضلع المتعرّج، ما يسهِّل رسم المضلّعات التي تحتوي على ثقوب. اطّلِع على مستندات طبقة البيانات.
إضافة مضلّع
وبما أنّ المنطقة المضلّعة قد تحتوي على عدة مسارات منفصلة، تحدّد السمة paths
الخاصة بالعنصر Polygon
مصفوفة من المصفوفات، وكل نوع من المصفوفات من النوع MVCArray
. يحدّد كل مصفوفة تسلسلاً منفصلاً لإحداثيات LatLng
المرتبة.
بالنسبة إلى المضلّعات البسيطة التي تتكون من مسار واحد فقط، يمكنك إنشاء Polygon
باستخدام مصفوفة واحدة من إحداثيات LatLng
. ستحوِّل واجهة برمجة تطبيقات JavaScript للخرائط
المصفوفة البسيطة إلى مصفوفة من المصفوفات عند إنشائها
عند تخزينها في السمة paths
. توفّر واجهة برمجة التطبيقات طريقة 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
، ولكن يُرجى العلم أنّ المجموعتَين الأولى والأخيرة
تحددان الموقع نفسه، ما يؤدي إلى إكمال حلقة التكرار. من الناحية العملية،
بما أنّ المضلّعات تحدّد المناطق المغلقة، لن تحتاج إلى تحديد آخر
مجموعة من الإحداثيات. ستكمل واجهة برمجة تطبيقات JavaScript للخرائط
المضلّع تلقائيًا من خلال رسم خط مائل يربط الموقع الأخير مرة أخرى بالموقع الأول
لأي مسار محدد.
يتطابق المثال التالي مع المثال السابق، باستثناء
المثال الأخير الذي تم حذفه:
عرض المثال.LatLng
إزالة مضلّع
لإزالة مضلّع من الخريطة، يمكنك طلب طريقة setMap()
مع تمرير null
كوسيطة. في المثال التالي، تمثّل bermudaTriangle
كائنًا مضلّعًا:
bermudaTriangle.setMap(null);
لاحظ أن الطريقة أعلاه لا تحذف المضلّع. وسيؤدّي ذلك إلى إزالة
المضلّع من الخريطة. وإذا أردت بدلاً من ذلك حذف المضلّع، عليك إزالته من الخريطة وضبط المضلّع نفسه على null
.
فحص المضلّع
يحدّد المضلّع سلسلة إحداثياته كمصفوفة من المصفوفات، حيث يكون كل صفيف من النوع MVCArray
. كل مصفوفة "ورقة" هي مصفوفة من إحداثيات LatLng
تحدّد مسارًا واحدًا. لاسترداد هذه الإحداثيات، يمكنك استدعاء طريقة getPaths()
لكائن Polygon
. بما أنّ المصفوفة هي MVCArray
، عليك معالجتها
وفحصها باستخدام العمليات التالية:
- تعرض
getAt()
القيمةLatLng
في قيمة فهرس معيّنة تستند إلى صفر. - تُدرِج السمة
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;
تجربة "عيّنة"
وضع ثقب في المضلّع
لإنشاء منطقة فارغة داخل مضلّع، عليك إنشاء مسارَين، أحدهما داخل الآخر. لإنشاء الثقب، يجب أن تكون الإحداثيات التي تحدّد المسار الداخلي بترتيب عكسي لتلك التي تحدّد المسار الخارجي. على سبيل المثال، إذا كانت إحداثيات المسار الخارجي بترتيب عقارب الساعة، يجب أن يكون المسار الداخلي عكس عقارب الساعة.
ملاحظة: تعالج طبقة البيانات ترتيب المسارات الداخلية والخارجية، ما يسهِّل رسم مضلّعات تحتوي على ثقوب. اطّلِع على مستندات طبقة البيانات.
يرسم المثال التالي مضلّعًا به مسارَين، ويظهر المسار الداخلي في الاتجاه المعاكس للمسار الخارجي.
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" فئة محدّدة لكائنات
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;
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" فئة محددة لكائنات
Circle
، وذلك لتبسيط عملية إنشائها.
إضافة دائرة
يشبه Circle
علامة Polygon
في إمكانية تحديد ألوان وأوزان ودرجات تعتيم مخصّصة لحافة الدائرة (حدّ السُمك) وألوان وتعتيمات مخصّصة للمنطقة داخل الدائرة (التعبئة). يجب الإشارة إلى الألوان بنمط HTML الرقمي السداسي العشري.
على عكس 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;
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
.
يحتفظ المضلّع الجيوديسي بشكله الجغرافي الحقيقي عند تحريكه، ما يتسبب في ظهور المضلّع مشوّهًا عند تحركه نحو الشمال أو الجنوب في إسقاط ماركتور. تحتفظ المضلّعات غير الجيوديسية دائمًا بمظهرها الأولي على الشاشة.
في الخطوط المتعددة الجيوديسية، يتم رسم أجزاء الخط المتعدد كأقصر مسار بين نقطتين على سطح الأرض، بافتراض أنّ الأرض هي كرة، على عكس الخطوط المستقيمة على إسقاط ماركاتور.
لمزيد من المعلومات حول أنظمة الإحداثيات، راجِع دليل الخريطة وإحداثيات المربّعات.
تعرض الخريطة التالية مثلثَين بنفس الحجم والأبعاد تقريبًا. تم ضبط الخاصية geodesic
في المثلث الأحمر على true
. لاحظ كيف يتغير شكله أثناء تحركه نحو الشمال.
الاستماع إلى تعديل الأحداث
وعند تعديل شكل، يتم تنشيط الحدث عند اكتمال التعديل. تم إدراج هذه الفعاليات أدناه.
شكل | فعاليات |
---|---|
دائرة |
radius_changed center_changed
|
مضلّع |
insert_at remove_at set_at
يجب ضبط المستمع على مسار المضلّع. إذا كان المضلّع يحتوي على مسارات متعددة، يجب تحديد أداة استماع لكل مسار. |
خط متعدد |
insert_at remove_at set_at
يجب ضبط المستمع على مسار الخطوط المتعددة. |
مستطيلة | 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 |
يتم إطلاقه عندما يتوقف المستخدم عن سحب الشكل. |
لمزيد من المعلومات عن التعامل مع الأحداث، راجِع المستندات المتعلقة بالأحداث.