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