الرموز (الرموز المستندة إلى المتجهات)

  1. مقدّمة
  2. خصائص الرمز
  3. الرموز المحدّدة مسبقًا
  4. إضافة رمز إلى علامة
  5. إضافة رمز إلى خط متعدد الأضلاع
  6. إضافة حركة إلى رمز

مقدمة

Symbol هي أيقونة مستندة إلى متجهات يمكن عرضها على عنصر Marker أو Polyline. يتم تحديد شكل الرمز من خلال مسار باستخدام ترميز مسار SVG. على الرغم من أنّ path هي السمة الوحيدة المطلوبة، يتيح العنصر Symbol مجموعة متنوعة من السمات التي تتيح لك تخصيص الجوانب المرئية، مثل لون ووزن الحد والتعبئة. اطّلِع على قائمة السمات.

تتوفّر عدة رموز محدّدة مسبقًا من خلال الفئة SymbolPath. يمكنك الاطّلاع على القائمة أدناه.

خصائص الرمز

يُرجى العِلم أنّ السلوك التلقائي لـ Symbol يختلف قليلاً حسب ما إذا كان يظهر على علامة أو خط متعدد الأضلاع. يتم توضيح هذه الاختلافات في قائمة المواقع أدناه.

يتوافق النوع Symbol مع السمات التالية:

  • ‫path (مطلوب) هو المسار الذي يحدّد شكل الرمز. يمكنك استخدام أحد المسارات المحدّدة مسبقًا في google.maps.SymbolPath أو تحديد مسار مخصّص باستخدام ترميز مسار SVG. ملاحظة: يجب أن تتناسب مسارات الرسومات المتجهة على خط متعدد الأضلاع مع مربّع بحجم 22 × 22 بكسل. إذا كان مسارك يتضمّن نقاطًا خارج هذا المربّع، عليك تعديل السمة 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 للرمز.

الرموز المحدّدة مسبقًا

توفّر Maps JavaScript API بعض الرموز المضمّنة التي يمكنك إضافتها إلى العلامات أو الخطوط المتعددة الأضلاع من خلال الفئة 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 سهم يشير إلى الأمام ومفتوح من جهة واحدة

إضافة رمز إلى علامة

لعرض رمز مستند إلى متجهات على AdvancedMarkerElement، استخدِم عنصر XML SVG. يوضّح المثال التالي كيفية إلحاق عنصر SVG XML بعنصر AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

إضافة رمز إلى خطوط متعدّدة

لعرض الرموز على خط متعدد الأضلاع، اضبط السمة 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;
عرض مثال