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

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

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

لعرض أيقونة متجهة على marker، مرِّر قيمة حرفية للكائن 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%") أو بالبكسل (مع على سبيل المثال، "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
  });

الاطّلاع على مثال

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

يمكنك تحريك رمز على طول مسار باستخدام عناصر 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
الاطّلاع على مثال

تجربة "عيّنة"