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

  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 للرمز.

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

توفّر واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" بعض الرموز المضمّنة التي يمكنك إضافتها إلى العلامات أو الخطوط المتعددة من خلال فئة 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;
index.ts

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;
index.js
عرض مثال

تجربة عيّنة

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

لعرض الرموز على خطّ متعدد الأضلاع، اضبط السمة icons[] لموضوع PolylineOptions. تأخذ صفيف icons[] عنصرًا واحدًا أو أكثر من عناصر IconSequence الثابتة، مع السمات التالية:

  • ‫icon (مطلوب) هو الرمز الذي يتم عرضه على السطر.
  • offset يحدّد المسافة من بداية السطر التي سيتم عرض الرمز فيها. يمكن التعبير عن هذه المسافة كنسبة مئوية من طول الخط (على سبيل المثال، "‎50%") أو بوحدات البكسل (على سبيل المثال، "‎50px"). القيمة التلقائية هي "‎100%".
  • repeat لتحديد المسافة بين الرموز المتتالية على الخط ويمكن التعبير عن هذه المسافة كنسبة مئوية من طول الخط (على سبيل المثال، "‎50%") أو بوحدات البكسل (على سبيل المثال، "‎50px"). لإيقاف تكرار الرمز، حدِّد "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
  });

عرض مثال

إضافة تأثيرات حركية إلى رمز

يمكنك إضافة تأثير متحركة إلى رمز على طول مسار باستخدام دالة DOM window.setInterval() لتغيير القيمة المرجعية للرمز على فترات ثابتة.

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;
index.ts

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;
index.js
عرض مثال

تجربة عيّنة