نظرة عامة
يوضح لك هذا البرنامج التعليمي كيفية استخدام مجموعات العلامات لعرض عدد كبير من العلامات على الخريطة. يمكنك استخدام مكتبة @googlemaps/Markscopeer جنبًا إلى جنب مع واجهة برمجة تطبيقات JavaScript لخدمة "خرائط Google" لدمج علامات التقارب في مجموعات، وتبسيط عرض العلامات على الخريطة.
لمعرفة آلية عمل تجميع العلامات، اطّلِع على الخريطة أدناه.
يشير الرقم في إحدى المجموعات إلى عدد العلامات التي تحتوي عليها. لاحظ أنّه عند تكبير أيٍّ من المواقع الجغرافية للمجموعة، سينخفض الرقم في المجموعة، وتبدأ في رؤية العلامات الفردية على الخريطة. يؤدي تصغير الخريطة إلى دمج العلامات في مجموعة مرة أخرى.
يعرض النموذج التالي الرمز بأكمله الذي تحتاجه لإنشاء هذه الخريطة.
TypeScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 3, center: { lat: -28.024, lng: 140.887 }, mapId: 'DEMO_MAP_ID', } ); const infoWindow = new google.maps.InfoWindow({ content: "", disableAutoPan: true, }); // Create an array of alphabetical characters used to label the markers. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Add some markers to the map. const markers = locations.map((position, i) => { const label = labels[i % labels.length]; const pinGlyph = new google.maps.marker.PinElement({ glyph: label, glyphColor: "white", }) const marker = new google.maps.marker.AdvancedMarkerElement({ position, content: pinGlyph.element, }); // markers can only be keyboard focusable when they have click listeners // open info window when marker is clicked marker.addListener("click", () => { infoWindow.setContent(position.lat + ", " + position.lng); infoWindow.open(map, marker); }); return marker; }); // Add a marker clusterer to manage the markers. new MarkerClusterer({ markers, map }); } const locations = [ { lat: -31.56391, lng: 147.154312 }, { lat: -33.718234, lng: 150.363181 }, { lat: -33.727111, lng: 150.371124 }, { lat: -33.848588, lng: 151.209834 }, { lat: -33.851702, lng: 151.216968 }, { lat: -34.671264, lng: 150.863657 }, { lat: -35.304724, lng: 148.662905 }, { lat: -36.817685, lng: 175.699196 }, { lat: -36.828611, lng: 175.790222 }, { lat: -37.75, lng: 145.116667 }, { lat: -37.759859, lng: 145.128708 }, { lat: -37.765015, lng: 145.133858 }, { lat: -37.770104, lng: 145.143299 }, { lat: -37.7737, lng: 145.145187 }, { lat: -37.774785, lng: 145.137978 }, { lat: -37.819616, lng: 144.968119 }, { lat: -38.330766, lng: 144.695692 }, { lat: -39.927193, lng: 175.053218 }, { lat: -41.330162, lng: 174.865694 }, { lat: -42.734358, lng: 147.439506 }, { lat: -42.734358, lng: 147.501315 }, { lat: -42.735258, lng: 147.438 }, { lat: -43.999792, lng: 170.463352 }, ]; initMap();
JavaScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: -28.024, lng: 140.887 }, mapId: "DEMO_MAP_ID", }); const infoWindow = new google.maps.InfoWindow({ content: "", disableAutoPan: true, }); // Create an array of alphabetical characters used to label the markers. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Add some markers to the map. const markers = locations.map((position, i) => { const label = labels[i % labels.length]; const pinGlyph = new google.maps.marker.PinElement({ glyph: label, glyphColor: "white", }); const marker = new google.maps.marker.AdvancedMarkerElement({ position, content: pinGlyph.element, }); // markers can only be keyboard focusable when they have click listeners // open info window when marker is clicked marker.addListener("click", () => { infoWindow.setContent(position.lat + ", " + position.lng); infoWindow.open(map, marker); }); return marker; }); // Add a marker clusterer to manage the markers. new MarkerClusterer({ markers, map }); } const locations = [ { lat: -31.56391, lng: 147.154312 }, { lat: -33.718234, lng: 150.363181 }, { lat: -33.727111, lng: 150.371124 }, { lat: -33.848588, lng: 151.209834 }, { lat: -33.851702, lng: 151.216968 }, { lat: -34.671264, lng: 150.863657 }, { lat: -35.304724, lng: 148.662905 }, { lat: -36.817685, lng: 175.699196 }, { lat: -36.828611, lng: 175.790222 }, { lat: -37.75, lng: 145.116667 }, { lat: -37.759859, lng: 145.128708 }, { lat: -37.765015, lng: 145.133858 }, { lat: -37.770104, lng: 145.143299 }, { lat: -37.7737, lng: 145.145187 }, { lat: -37.774785, lng: 145.137978 }, { lat: -37.819616, lng: 144.968119 }, { lat: -38.330766, lng: 144.695692 }, { lat: -39.927193, lng: 175.053218 }, { lat: -41.330162, lng: 174.865694 }, { lat: -42.734358, lng: 147.439506 }, { lat: -42.734358, lng: 147.501315 }, { lat: -42.735258, lng: 147.438 }, { lat: -43.999792, lng: 170.463352 }, ]; initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Marker Clustering</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
تجربة عيّنة من المحتوى
في صورة توضيحية بسيطة، يضيف هذا الدليل التوجيهي مجموعة من العلامات إلى الخريطة باستخدام المصفوفة locations
. يمكنك استخدام مصادر أخرى للحصول على علامات لخريطتك.
ولمزيد من المعلومات، اطّلِع على دليل إنشاء العلامات.
إضافة مجمِّع علامات
اتّبع الخطوات أدناه لإضافة مجموعة علامات:
- أضِف مكتبة تجميع العلامات إلى صفحتك أو تطبيقك. تتوفّر المكتبة على NPM على الرابط @googlemaps/markscopeer وفي المستودع على GitHub.
وحدة NPM
ثبِّت أحدث إصدار من مكتبة @googlemaps/Markscopeer باستخدام برنامج NPM.
npm install @googlemaps/markerclusterer
شبكة عرض المحتوى (CDN)
ويُحمِّل النص البرمجي أدناه أحدث إصدار من المكتبة بتنسيق 1.x.x من unpkg.com CDN.
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- إضافة مجمِّع علامات في تطبيقك
يضيف الرمز أدناه مجمِّع علامات إلى الخريطة.
وحدة NPM
import { MarkerClusterer } from "@googlemaps/markerclusterer"; const markerCluster = new MarkerClusterer({ map, markers });
شبكة عرض المحتوى (CDN)
عندما يتم الوصول إلى المكتبة باستخدام شبكة توصيل المحتوى (CDN)، تصبح المكتبة متاحة ضمن النطاق
markerClusterer
العالمي.const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
ينقل هذا النموذج الصفيف
markers
إلىMarkerClusterer
. - تخصيص أداة تجميع العلامات
- تخصيص رمز المجموعة من خلال واجهة العارض.
- تعديل الخوارزمية لإنشاء مجموعات.
مزيد من المعلومات
يمكنك الاطّلاع على أمثلة أكثر تعقيدًا عن تجميع العلامات في مستودع GitHub وقراءة المستندات المرجعية للمكتبة.