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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
  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 باستثناء الألوان المُوسَّعة. وبالنسبة إلى الرموز على العلامات، يكون الإعداد التلقائي هو 'black'. بالنسبة إلى الرموز على الخطوط المتعددة، يكون الإعداد التلقائي هو لون خط الرسم المائل.
  • يحدّد fillOpacity مستوى التعتيم النسبي (أي عدم توفّر الشفافية) لملء الرمز. تتراوح القيم بين 0.0 (شفاف بالكامل) و1.0 (مُعتِم بالكامل). والقيمة التلقائية هي 0.0.
  • rotation هي الزاوية التي يتم من خلالها تدوير الرمز، ويتم التعبير عنه في اتجاه عقارب الساعة. ويتم تلقائيًا تدوير محدّد الموقع للسمة 0، ويتم تدوير رمز على خط متعدد استنادًا إلى زاوية الحافة التي تقع عليها. يؤدي ضبط تدوير رمز في خط متعدد على إصلاح تدوير الرمز بحيث لا يتّبع منحنى الخط.
  • scale تضبط القيمة التي سيتم من خلالها تغيير حجم الرمز. بالنسبة إلى علامات الرموز، المقياس التلقائي هو 1. بعد تغيير الحجم، قد يكون الرمز بأي حجم. بالنسبة إلى الرموز في الخط المتعدد، يكون المقياس التلقائي هو كثافة الخط في الخط المتعدد. بعد تغيير الحجم، يجب وضع الرمز داخل مربّع 22x22 بكسل، في وسط الرمز والارتساء.
  • strokeColor هو لون رمز المخطط. ويمكن استخدام جميع ألوان CSS3 باستثناء الألوان ذات الأسماء الموسّعة. بالنسبة إلى الرموز على العلامات، يكون الإعداد التلقائي هو 'black'. بالنسبة إلى الرموز على الخط المتعدد، يكون اللون التلقائي هو لون خط الرسم.
  • strokeOpacity يحدد التعتيم النسبي (أي عدم وجود شفافية) للضغطة على الرمز. تتراوح القيم بين 0.0 (شفاف بالكامل) و1.0 (مُعتِم بالكامل). وبالنسبة إلى علامات الرموز، تكون القيمة التلقائية 1.0. بالنسبة إلى الرموز على الخطوط المتعددة، يكون الإعداد التلقائي هو تعتيم الخط المتعدد.
  • تحدّد السمة strokeWeight وزن مخطط الرمز. وتكون السمة التلقائية scale هي الرمز.

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

توفّر Google Maps 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 سهم يشير إلى الأمام ويكون مفتوحًا على جانب واحد.

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

لعرض رمز مستند إلى متّجه على علامة، أدخِل الكائن 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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

  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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
عرض مثال

جرّب عيّنة

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

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

  • icon (مطلوبة) هي الرمز الذي يتم عرضه في السطر.
  • تحدّد السمة offset المسافة من بداية السطر الذي يجب عرض الرمز فيه. ويمكن التعبير عن هذه المسافة كنسبة مئوية من طول السطر (على سبيل المثال، &39;50%&#39؛) أو بالبكسل (على سبيل المثال، &39;50 بكسل&39;). وتكون القيمة التلقائية هي '100%&#39؛
  • تحدّد السمة repeat المسافة بين الرموز المتتالية على الخط. يمكن التعبير عن هذه المسافة كنسبة مئوية من طول السطر (على سبيل المثال، '50%') أو بالبكسل (على سبيل المثال، '50 بكسل'). لإيقاف تكرار الرمز، حدِّد '0&#39؛ وتكون القيمة التلقائية هي '0&#39؛

عند استخدام مجموعة من الرموز وفئة 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&#39 لتغيير معادلة الرمز على فترات ثابتة.

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

جرّب عيّنة