يمكنك إضافة أشكال مختلفة إلى خريطتك. والشكل هو كائن على الخريطة مرتبط بإحداثي خط العرض/الطول. وتتوفر الأشكال التالية: الخطوط والمضلّعات والدوائر والمستطيلات. يمكنك أيضًا ضبط الأشكال بحيث يمكن للمستخدمين تعديلها أو سحبها.
الخطوط المتعددة
لرسم خط على خريطتك، استخدم خطًا متعددًا. تحدّد الفئة
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. ستحوّل واجهة Maps JavaScript API
الصفيف البسيط إلى مصفوفة من المصفوفات عند إنشائها عند تخزينها
في السمة 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 لـ "خرائط 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 لـ "خرائط 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_changedcenter_changed
|
| مضلّع |
insert_atremove_atset_at
يجب تعيين أداة معالجة البيانات على مسار المضلّع. إذا كان المضلّع يحتوي على مسارات متعددة، يجب تعيين أداة معالجة في كل مسار. |
| خط متعدد |
insert_atremove_atset_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 |
يتم تنشيطها عندما يتوقف المستخدم عن سحب الشكل. |
لمزيد من المعلومات حول كيفية التعامل مع الأحداث، يمكنك الاطّلاع على المستندات الخاصة بالأحداث.