- المقدمة
- خصائص الرمز
- الرموز المحدّدة مسبقًا
- إضافة رمز إلى علامة
- إضافة رمز إلى خط متعدد
- إضفاء المؤثر الحركي على رمز
مقدمة
Symbol
هو رمز مستند إلى متجه ويمكن عرضه على
Marker
أو
عنصر Polyline
. يتم تحديد شكل الرمز من خلال مسار باستخدام تدوين مسار SVG.
بالرغم من أنّ السمة path
هي السمة الوحيدة المطلوبة، يتيح العنصر Symbol
استخدام مجموعة متنوعة من السمات التي تسمح لك بتخصيص الجوانب المرئية، مثل لون الحد الخارجي والتعبئة ووزنه. اطّلِع على قائمة المواقع.
وتتوفّر العديد من الرموز المحدّدة مسبقًا ضمن الفئة SymbolPath
. يُرجى الاطّلاع على القائمة أدناه.
خصائص الرمز
يُرجى العلم بأنّ السلوك التلقائي للسمة Symbol
يختلف قليلاً
بناءً على ما إذا كان يظهر على علامة أو خط متعدد. وقد تم توضيح هذه الاختلافات في قائمة السمات أدناه.
يتيح Symbol
استخدام السمات التالية:
path
(مطلوبة) هي المسار الذي يحدّد شكل الرمز. يمكنك استخدام أحد المسارات المحدّدة مسبقًا فيgoogle.maps.SymbolPath
أو تحديد مسار مخصّص باستخدام تدوين مسار SVG. ملاحظة: يجب أن تتلاءم مسارات المتجه على الخطوط المتعددة داخل مربع 22×22 بكسل. إذا كان مسارك يتضمن نقاطًا خارج هذا المربّع، عليك تعديل سمةscale
الخاصة بالرمز إلى قيمة كسرية، مثل 0.2، بحيث تتوافق النقاط المعدّلة الناتجة مع المربّع.- تحدّد
anchor
موضع الرمز بالنسبة إلى العلامة أو الخطوط المتعددة. وتتم ترجمة إحداثيات مسار الرمز إلى اليسار وإلى الأعلى من خلال الإحداثي "س" و"ص" للمرساة على التوالي. يتم إرساء الرمز تلقائيًا في(0, 0)
. ويتم التعبير عن الموضع في نظام الإحداثيات نفسه المستخدَم في مسار الرمز. fillColor
هو لون تعبئة الرمز (أي المنطقة التي يحدّها الحد الخارجي). جميع ألوان CSS3 متوافقة باستثناء الألوان ذات الأسماء الموسّعة. بالنسبة للرموز على العلامات، يكون الوضع الافتراضي هو "أسود". وبالنسبة إلى الرموز على الخطوط المتعددة، يكون الإعداد التلقائي هو لون شطب الخط المتعدد المقابل.- تحدّد السمة
fillOpacity
التعتيم النسبي (أي عدم الشفافية) لتعبئة الرمز. وتتراوح القيم بين 0.0 (شفاف بالكامل) و1.0 (غير شفافة تمامًا). والقيمة التلقائية هي 0.0. rotation
هي الزاوية التي يجب تدوير الرمز من خلالها، ويتم التعبير عنها بالدرجات في اتجاه عقارب الساعة. يتم تلقائيًا تدوير علامة الرمز بقيمة 0، ويتم تدوير الرمز على الخط المتعدد بزاوية الحافة التي يقع عليها الرمز. سيؤدي ضبط تدوير رمز على خط متعدد إلى إصلاح تدوير الرمز بحيث لا يتبع منحنى الخط.- تحدِّد
scale
القيمة التي سيتم بها تغيير حجم الرمز. بالنسبة لعلامات الرموز، المقياس الافتراضي هو 1. بعد تغيير حجم الرمز، قد يظهر لك أي حجم. بالنسبة إلى الرموز على الخطوط المتعددة، يكون المقياس التلقائي هو سُمك خط الخط المتعدد. بعد تغيير حجم الرمز، يجب أن يكون داخل مربّع بحجم 22×22 بكسل يكون في وسط نقطة ارتساء الرمز. strokeColor
هو لون مخطط الرمز. ويمكن استخدام جميع ألوان CSS3 باستثناء الألوان ذات الأسماء الموسّعة. بالنسبة إلى الرموز على محدّدات المواقع، يكون الخيار التلقائي هو "أسود". بالنسبة إلى الرموز على الخطوط المتعددة، يكون اللون التلقائي هو لون شطب الخط المتعدد.- تحدّد السمة
strokeOpacity
التعتيم النسبي (أي عدم الشفافية) لحدّة الرمز. وتتراوح القيم بين 0.0 (شفاف بالكامل) و1.0 (غير شفافة تمامًا). بالنسبة لعلامات الرموز، تكون القيمة التلقائية 1.0. بالنسبة إلى الرموز على الخطوط المتعددة، يكون الإعداد التلقائي هو تعتيم حد الخط للخط المتعدد. - تحدّد السمة
strokeWeight
وزن مخطط الرمز. وتكون القيمة التلقائية هيscale
للرمز.
الرموز المحدّدة مسبقًا
توفر واجهة برمجة تطبيقات JavaScript للخرائط بعض الرموز المضمّنة التي يمكنك إضافتها إلى العلامات أو الخطوط المتعددة عبر فئة
SymbolPath
.
تتضمن الرموز الافتراضية دائرة ونوعين من الأسهم. ويتوفر كل من الأسهم الأمامية والخلفية. ويُعدّ ذلك مفيدًا على وجه الخصوص للخطوط المتعددة لأنّ اتجاه الرمز على الخطوط المتعددة ثابت. ويُعدّ الاتجاه الأمامي في اتجاه النهاية الأخيرة للخط المتعدد.
يمكنك تعديل الحد الخارجي أو تعبئة الرموز المحددة مسبقًا باستخدام أي من خيارات الرموز التلقائية.
يتم تضمين الرموز التالية المحددة مسبقًا:
الاسم | الوصف | مثال |
---|---|---|
google.maps.SymbolPath.CIRCLE |
دائرة. | |
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW |
سهم يشير إلى الخلف يتم إغلاقه من جميع الجوانب. | |
google.maps.SymbolPath.FORWARD_CLOSED_ARROW |
سهم يشير إلى الأمام يتم إغلاقه من جميع الجوانب. | |
google.maps.SymbolPath.BACKWARD_OPEN_ARROW |
سهم يشير إلى الخلف ويكون مفتوحًا على جانب واحد. | |
google.maps.SymbolPath.FORWARD_OPEN_ARROW |
سهم يشير إلى الأمام مفتوح على جانب واحد. |
إضافة رمز إلى محدّد الموقع
لعرض رمز مستند إلى متجه على علامة، اضبط الكائن Symbol
حرفيًا مع المسار المطلوب في سمة icon
للعلامة. يستخدم المثال التالي تدوين مسار SVG لإنشاء رمز مخصّص لعلامة.
TypeScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap(): void { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 9, center: center, } ); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap() { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map(document.getElementById("map"), { zoom: 9, center: center, }); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } window.initMap = initMap;
تجربة العينة
إضافة رمز إلى خط متعدد
لعرض الرموز على خط متعدد، اضبط السمة icons[]
للكائن PolylineOptions
. تستخدم المصفوفة icons[]
قيمة حرفية واحدة أو أكثر لكائن
IconSequence
، مع السمات التالية:
icon
(مطلوبة) هي الرمز الذي سيتم عرضه على السطر.- تحدّد السمة
offset
المسافة التي سيتم عرض الرمز عليها من بداية الخط. ويمكن التعبير عن هذه المسافة كنسبة مئوية لطول الخط (على سبيل المثال، "50%") أو بالبكسل (على سبيل المثال، "50 بكسل"). والقيمة التلقائية هي "100%". - تحدّد السمة
repeat
المسافة بين الرموز المتتالية على الخط. ويمكن التعبير عن هذه المسافة كنسبة مئوية لطول الخط (على سبيل المثال، "50%") أو بالبكسل (على سبيل المثال، "50 بكسل"). لإيقاف تكرار الرمز، حدِّد القيمة "0". والقيمة التلقائية هي "0".
باستخدام مجموعة من الرموز وفئة PolylineOptions
، يمكنك التحكّم بشكل كبير في شكل الخطوط المتعددة على خريطتك ومظهرها.
في ما يلي بعض الأمثلة على التخصيصات التي يمكنك تطبيقها.
أسهم
استخدِم السمة IconSequence.offset
لإضافة أسهم إلى بداية الخط المتعدد أو نهايته.
// Define a symbol using a predefined path (an arrow) // supplied by the Google Maps JavaScript API. var lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW }; // Create the polyline and add the symbol via the 'icons' property. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], icons: [{ icon: lineSymbol, offset: '100%' }], map: map });
خطوط متقطعة
يمكنك تحقيق تأثير خط متقطع من خلال ضبط تعتيم الخطوط المتعددة على 0، وتركيب رمز معتم فوق الخط على فترات منتظمة.
// Define a symbol using SVG path notation, with an opacity of 1. var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; // Create the polyline, passing the symbol in the 'icons' property. // Give the line an opacity of 0. // Repeat the symbol at intervals of 20 pixels to create the dashed effect. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], strokeOpacity: 0, icons: [{ icon: lineSymbol, offset: '0', repeat: '20px' }], map: map });
المسارات المخصّصة
تسمح لك الرموز المخصصة بإضافة العديد من الأشكال المختلفة إلى الخطوط المتعددة.
// Define the custom symbols. All symbols are defined via SVG path notation. // They have varying stroke color, fill color, stroke weight, // opacity and rotation properties. var symbolOne = { path: 'M -2,0 0,-2 2,0 0,2 z', strokeColor: '#F00', fillColor: '#F00', fillOpacity: 1 }; var symbolTwo = { path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3', strokeColor: '#00F', rotation: 45 }; var symbolThree = { path: 'M -2,-2 2,2 M 2,-2 -2,2', strokeColor: '#292', strokeWeight: 4 }; // Create the polyline and add the symbols via the 'icons' property. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], icons: [ { icon: symbolOne, offset: '0%' }, { icon: symbolTwo, offset: '50%' }, { icon: symbolThree, offset: '100%' } ], map: map });
تحريك رمز
يمكنك تحريك رمز على طول المسار باستخدام دالة window.setInterval()
في DOM لتغيير إزاحة الرمز على فترات زمنية ثابتة.
TypeScript
// This example adds an animated symbol to a polyline. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 20.291, lng: 153.027 }, zoom: 6, mapTypeId: "terrain", } ); // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. const lineSymbol = { path: google.maps.SymbolPath.CIRCLE, scale: 8, strokeColor: "#393", }; // Create the polyline and add the symbol to it via the 'icons' property. const line = new google.maps.Polyline({ path: [ { lat: 22.291, lng: 153.027 }, { lat: 18.291, lng: 153.027 }, ], icons: [ { icon: lineSymbol, offset: "100%", }, ], map: map, }); animateCircle(line); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line: google.maps.Polyline) { let count = 0; window.setInterval(() => { count = (count + 1) % 200; const icons = line.get("icons"); icons[0].offset = count / 2 + "%"; line.set("icons", icons); }, 20); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds an animated symbol to a polyline. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.291, lng: 153.027 }, zoom: 6, mapTypeId: "terrain", }); // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. const lineSymbol = { path: google.maps.SymbolPath.CIRCLE, scale: 8, strokeColor: "#393", }; // Create the polyline and add the symbol to it via the 'icons' property. const line = new google.maps.Polyline({ path: [ { lat: 22.291, lng: 153.027 }, { lat: 18.291, lng: 153.027 }, ], icons: [ { icon: lineSymbol, offset: "100%", }, ], map: map, }); animateCircle(line); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line) { let count = 0; window.setInterval(() => { count = (count + 1) % 200; const icons = line.get("icons"); icons[0].offset = count / 2 + "%"; line.set("icons", icons); }, 20); } window.initMap = initMap;