- المقدمة
- خصائص الرمز
- الرموز المحددة مسبقًا
- إضافة رمز إلى علامة
- إضافة رمز إلى خط متعدد
- إضفاء المؤثر الحركي على الرمز
المقدمة
Symbol هو رمز قائم على متّجه يمكن عرضه على كائن Marker أو كائن Polyline. يتم تحديد شكل الرمز من خلال مسار باستخدام تدوين مسار SVG.
على الرغم من أن path هي الخاصية المطلوبة الوحيدة، فإن الكائن Symbol يتوافق مع مجموعة متنوعة من الخصائص التي تسمح لك بتخصيص الجوانب المرئية، مثل لون الشطب والوزن والتعبئة. راجع قائمة المواقع.
تتوفّر عدة رموز معرّفة مسبقًا من خلال الفئة SymbolPath. اطّلع على القائمة أدناه.
خصائص الرمز
لاحظ أن السلوك التلقائي لـ Symbol يختلف قليلاً اعتمادًا على ما إذا كان يظهر على محدّد الموقع أم على الخطوط المتعددة. وترد هذه الاختلافات في قائمة الخصائص أدناه.
يتوافق Symbol مع الخصائص التالية:
path(مطلوبة) هي المسار الذي يُحدّد شكل الرمز. يمكنك استخدام أحد المسارات المحدّدة مسبقًا فيgoogle.maps.SymbolPathأو تحديد مسار مخصّص باستخدام تدوين مسار SVG. ملاحظة: يجب أن تتلاءم مسارات المتجه على الخطوط المتعددة داخل مربع 22x22 بكسل. إذا كان مسارك يتضمّن نقاطًا خارج هذه الساحة، عليك ضبط الخاصيةscaleللرمز على قيمة كسرية، مثل 0.2، بحيث تتناسب النقاط المتدرجة الناتجة داخل المربّع.- تحدد
anchorموضع الرمز بالنسبة إلى العلامة أو الخطوط المتعددة. تتم ترجمة إحداثيات مسار الرمز لليسار ولأعلى باستخدام الإحداثيَين "س" و"ص" على التوالي. يتم تثبيت الرمز تلقائيًا على(0, 0). يتم التعبير عن الموضع في نفس نظام الإحداثيات مثل مسار الرمز. fillColorهو لون تعبئة الرمز (أي المنطقة التي تحدّها الشطب). يتم دعم جميع ألوان CSS3 باستثناء الألوان ذات الأسماء الموسعة. بالنسبة إلى الرموز على المحددات، يكون الإعداد الافتراضي هو "أسود". بالنسبة إلى الرموز على الخطوط المتعددة، يكون اللون التلقائي هو لون شطب الخط المتعدد ذي الصلة.- يحدد
fillOpacityالتعتيم النسبي (أي عدم وجود شفافية) لتعبئة الرمز. تتراوح القيم من 0.0 (شفافة بالكامل) إلى 1.0 (معتمة بالكامل). القيمة التلقائية هي 0.0. rotationهي الزاوية التي يتم من خلالها تدوير الرمز، ويتم التعبير عنها في اتجاه عقارب الساعة بالدرجات. ويتم تلقائيًا تدوير علامة محدّد الرمز بمقدار 0، ويتم تدوير رمز على الخطوط المتعددة بزاوية حوافها التي تقع. يؤدي ضبط تدوير رمز على خط متعدد إلى إصلاح دوران الرمز بحيث لا يتبع منحنى الخط.- تحدد
scaleحجم تغيير حجم الرمز. بالنسبة إلى محددات الرموز، يكون المقياس الافتراضي 1. بعد تغيير الحجم، قد يكون الرمز بأي حجم. بالنسبة إلى الرموز على الخط المتعدد الخطوط، يكون المقياس التلقائي هو كثافة الخط للخط المتعدد. بعد تغيير الحجم، يجب وضع الرمز داخل مربّع 22x22 بكسل، في وسط مرساة الرمز. 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;