سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

المقدمة
خصائص الرمز
الرموز المحدّدة مسبقًا
إضافة رمز إلى علامة
إضافة رمز إلى خط متعدد
إضفاء المؤثر الحركي على رمز

مقدمة

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

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

خصائص الرمز

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

يتيح Symbol استخدام السمات التالية:

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

إضافة رمز إلى محدّد الموقع

لعرض رمز مستند إلى متجه على علامة، اضبط الكائن 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

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

تجربة العينة

JSFiddle.net Google Cloud Shell

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

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

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

ملاحظة: إذا كان الخط المتعدد جيوديسيًا (أي إذا تم ضبط السمة geodesic الخاصة به على true)، يتم تلقائيًا احتساب المسافات المحددة لكل من offset وrepeat بالمتر. وعند ضبط offset أو repeat على قيمة بكسل، يتم احتساب المسافة بالبكسل على الشاشة.

باستخدام مجموعة من الرموز وفئة 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;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

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

تجربة العينة

JSFiddle.net Google Cloud Shell