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

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

المقدمة

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

تجربة النموذج