إشعار الأمان: نما إلى علمنا بمشكلة أمنية قد تؤثر في المواقع الإلكترونية التي تستخدم مكتبات معيّنة تابعة لجهات خارجية (بما في ذلك polyfill.io). وقد تؤدي هذه المشكلة في بعض الأحيان إلى إعادة توجيه الزائرين بعيدًا عن الموقع الإلكتروني المقصود بدون معرفة مالك الموقع أو إذنه. وفي السابق، كان يتضمّن العديد من نماذج JavaScript تعريف النص البرمجي polyfill.io. تمت إزالة هذا المحتوى من نماذجنا. إذا كنت قد استخدمت نماذج JavaScript التي تحتوي على هذا التعريف، ننصحك بإزالة التعريف.

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

العلامات (قديمة)

اختيار النظام الأساسي: Android iOS JavaScript

مقدمة

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

بشكل عام، تعد العلامات نوعًا من التراكب. للحصول على معلومات عن أنواع التراكب، راجع الرسم على الخريطة:

تم تصميم العلامات لتكون تفاعلية. على سبيل المثال، بشكل افتراضي تلقّي أحداث "'click'"، وبالتالي يمكنك إضافة أداة معالجة الأحداث إلى إحضار نافذة المعلومات عرض المعلومات المخصصة. يمكنك السماح للمستخدمين بنقل إحدى العلامات على من خلال ضبط سمة draggable للعلامة على true لمزيد من المعلومات عن العلامات القابلة للسحب، راجع أدناه.

إضافة علامة

تشير رسالة الأشكال البيانية google.maps.Marker تأخذ الدالة الإنشائية كائن Marker options واحدًا حرفي، من خلال تحديد الخصائص الأولية للعلامة.

تُعد الحقول التالية مهمة بشكل خاص ويتم تعيينها بشكل شائع عند إنشاء علامة:

يحدّد position (مطلوب) LatLng يحدد الموقع الأولي للعلامة. وَاحِدْ لاسترجاع LatLng، هي باستخدام خدمة ترميز المواقع الجغرافية:
تحدّد السمة map (اختيارية) السمة Map التي يتم ضع العلامة. إذا لم يتم تحديد الخريطة عند إنشاء محدّد الموقع، يتمّ إنشاء العلامة ولكن لم يتمّ إرفاقها بـ (أو عرضها) الخريطة. يمكنك إضافة محدد الموقع لاحقًا عن طريق استدعاء علامة طريقة setMap().

يضيف المثال التالي علامة بسيطة إلى خريطة في أولورو، في وسط أستراليا:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

في المثال أعلاه، يتم وضع العلامة على الخريطة عند إنشاء العلامة التي تستخدم السمة map في خيارات العلامة. أو يمكنك إضافة المُحدِّد إلى الخريطة مباشرةً باستخدام للعلامة setMap()، كما هو موضح في المثال أدناه:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

The marker's title will appear as a tooltip.

If you do not wish to pass any Marker options in the marker's constructor, instead pass an empty object {} in the last argument of the constructor.

View example

Remove a marker

To remove a marker from the map, call the setMap() method passing null as the argument.

marker.setMap(null);

Note that the above method does not delete the marker. It removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.

If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.

View example

Customize a marker image

You can customize the visual appearance of markers by specifying an image file or vector-based icon to display instead of the default Google Maps pushpin icon. You can add text with a marker label, and use complex icons to define clickable regions, and set the stack order of markers.

Markers with image icons

In the most basic case, an icon can specify an image to use instead of the default Google Maps pushpin icon. To specify such an icon, set the marker's icon property to the URL of an image. The Maps JavaScript API will size the icon automatically.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

علامات برموز متجهات

يمكنك استخدام مسارات متجهات SVG مخصصة لتحديد المظهر المرئي . للقيام بذلك، عليك تمرير كائن Symbol حرفيًا مع المسار المطلوب إلى السمة icon الخاصة بالعلامة التجارية. يمكنك تحديد مسار مخصص باستخدام تدوين مسار SVG، أو استخدِم أحد المسارات المحدَّدة مسبقًا في google.maps.SymbolPath. يجب إدخال السمة anchor لكي يتم استخدام العلامة العرض بشكل صحيح عندما يتغير مستوى التكبير/التصغير. مزيد من المعلومات حول استخدام الرموز لإنشاء رموز متجهات للعلامات (والخطوط المتعددة).

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

تصنيفات العلامات

علامة العلامة هي حرف أو رقم يظهر داخل العلامة. تشير رسالة الأشكال البيانية تعرض صورة العلامة في هذا القسم تصنيف علامة بالحرف "B" عليها. يمكنك تحديد تصنيف علامة كسلسلة أو MarkerLabel يتضمن سلسلة وخصائص التصنيف الأخرى.

عند إنشاء علامة، يمكنك تحديد السمة label في الـ MarkerOptions الخاص بك. يمكنك بدلاً من ذلك الاتصال بـ setLabel() على الرقم محدِّد لتعيين التصنيف على علامة حالية.

يعرض المثال التالي علامات مصنَّفة عندما ينقر المستخدم على الخريطة:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

الأيقونات المعقدة

يمكنك تحديد أشكال معقدة للإشارة إلى المناطق القابلة للنقر، تحديد كيفية ظهور الرموز بالنسبة للتراكبات الأخرى ( "ترتيب تسلسل استدعاء الدوال البرمجية"). يجب أن تحدد الرموز المحددة بهذه الطريقة icon الخصائص لكائن من النوع Icon

Icon الكائنات تحدد الصورة. وتحدّد أيضًا size الرمز، origin للرمز (إذا كانت الصورة التي تريدها جزءًا صورة أكبر في الرموز المتحركة، على سبيل المثال) anchor الذي ينبغي أن تقع فيه نقطة اتصال الرمز (وهي استنادًا إلى الأصل).

في حال استخدام تصنيف مع تصنيف مخصّص يمكنك وضع التصنيف مع الخاصية "labelOrigin" في Icon الخاص بك.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

جارٍ تحويل `MarkerImage` عناصر إلى النوع `Icon`

حتى الإصدار 3.10 من واجهة برمجة تطبيقات JavaScript للخرائط، كانت الرموز المعقدة تم تحديدها على أنّها عناصر MarkerImage. تشير رسالة الأشكال البيانية تمت إضافة قيمة حرفية لعنصر Icon في الإصدار 3.10 واستبدالها. MarkerImage من الإصدار 3.11 والإصدارات الأحدث. تتوافق القيم الحرفية لكائنات Icon مع المعلَمات نفسها مثل MarkerImage، ما يتيح لك تحويل MarkerImage إلى Icon عن طريق إزالة الدالة الإنشائية، مع إحاطة المعاملات السابقة بـ {}، وإضافة أسماء كل معلمة. على سبيل المثال:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

becomes

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Optimize markers

Optimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required. By default, the Maps JavaScript API will decide whether a marker will be optimized. When there is a large number of markers, the Maps JavaScript API will attempt to render markers with optimization. Not all Markers can be optimized; in some situations, the Maps JavaScript API may need to render Markers without optimization. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element. The following example shows creating an optimized marker:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

إتاحة الوصول إلى علامة

يمكنك إتاحة الوصول إلى محدّد الموقع من خلال إضافة حدث استماع نقر، ضبط optimized على false أداة معالجة النقرات إلى اشتمال العلامة على دلالات الزر، والتي يمكن الوصول إليها باستخدام التنقل بلوحة المفاتيح، وقارئات الشاشة، وما إلى ذلك. يمكنك استخدام خيار title لمشاركة نص يمكن الوصول إليه لعلامة معيّنة.

في المثال التالي، يتم التركيز على العلامة الأولى عندما تكون علامة التبويب مضغوطة يمكنك بعد ذلك استخدام مفاتيح الأسهم للتنقل بين العلامات. اضغط على انقر مرة أخرى لمتابعة التنقل من خلال بقية عناصر التحكم في الخريطة. إذا علامة الموقع في نافذة المعلومات، يمكنك فتحها بالنقر على العلامة أو من خلال الضغط على مفتاح Enter أو مفتاح المسافة عند تحديد العلامة. عندما تم إغلاق نافذة المعلومات، سيعود التركيز إلى العلامة المرتبطة.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

تحريك علامة

يمكنك تحريك العلامات بحيث تظهر حركة ديناميكية في مجموعة متنوعة من الظروف المختلفة. لتحديد الطريقة التي تتحرك بها العلامة، استخدم السمة animation الخاصة بالعلامة التجارية، من النوع google.maps.Animation ما يلي: قيم Animation مسموح بها:

يشير DROP إلى أنه يجب إفلات العلامة من أعلى الخريطة إلى موقعها النهائي عند وضعها لأول مرة على الخريطة. صورة متحركة سيتوقّف عند وضع العلامة وسيعمل animation العودة إلى null يتم عادةً تحديد هذا النوع من الرسوم المتحركة أثناء إنشاء Marker.
تشير القيمة BOUNCE إلى أنّ العلامة يجب أن ترتد في مكانها. حاسمة ستستمر علامة الارتداد في الارتداد حتى تم ضبط السمة animation صراحةً على null.

يمكنك بدء رسم متحرك على علامة حالية من خلال استدعاء setAnimation() في الكائن Marker.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;index.js

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

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

JSFiddle.net Google Cloud Shell

إذا كان لديك العديد من العلامات، فقد لا ترغب في إسقاطها على الخريطة جميعًا دفعة واحدة. يمكنك الاستفادة من setTimeout() في إنشاء مسافة أقلام تحديد والرسوم المتحركة باستخدام نمط مثل ما هو موضح أدناه:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

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

جعل محدّد الموقع قابلاً للسحب

للسماح للمستخدمين بسحب علامة إلى موقع مختلف على الخريطة، قم بتعيين من draggable إلى true في خيارات محدّد الموقع.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

تخصيص علامات إضافية

للحصول على علامة مخصصة بالكامل، راجع مثال على نافذة منبثقة مخصّصة

للحصول على مزيد من الإضافات في فئة محدّد الموقع، وتجميع العلامات وإدارتها، وتخصيص التراكب، يمكنك الاطلاع على المكتبات المفتوحة المصدر.

العلامات (قديمة)

مقدمة

إضافة علامة

TypeScript

JavaScript

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

Remove a marker

Customize a marker image

Markers with image icons

TypeScript

JavaScript

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

علامات برموز متجهات

TypeScript

JavaScript

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

تصنيفات العلامات

TypeScript

JavaScript

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

الأيقونات المعقدة

TypeScript

JavaScript

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

جارٍ تحويل MarkerImage عناصر إلى النوع Icon

Optimize markers

إتاحة الوصول إلى علامة

TypeScript

JavaScript

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

تحريك علامة

TypeScript

JavaScript

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

جعل محدّد الموقع قابلاً للسحب

تخصيص علامات إضافية

جارٍ تحويل `MarkerImage` عناصر إلى النوع `Icon`