بدائل JavaScript متوافقة لمكتبات الخرائط والترميز الجغرافي

في هذه الصفحة

• واجهة Google Maps JavaScript API
• عنصر التحكم Bing Maps V8 Web Control
• Mapbox GL JS وmapbox-gl-geocoder
• إضافات الترميز الجغرافي في Leaflet
• واجهة HERE Maps API for JavaScript
• MapQuest.js
• بلاطات الخرائط وأنماطها
• المفاتيح في المتصفح

واجهة Google Maps JavaScript API

حمّل مكتبة الخرائط من gapi.mygeocode.com بدلًا من maps.googleapis.com. تتوفر مساحة الأسماء google.maps، مع بلاطات الخرائط والعلامات وGeocoder وPlaces Autocomplete وElevationService التي نقدّمها نحن. لا يُحتسب تحميل الخرائط ضمن حصتك.

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&libraries=places&callback=initMap">
</script>

<script async defer
  src="https://gapi.mygeocode.com/maps/api/js?key=YOUR_MYGEOCODE_KEY&libraries=places&callback=initMap">
</script>

// Nothing below this line changes.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 51.5074, lng: -0.1278 },
    zoom: 12
  });

  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "221B Baker Street, London" }, (results, status) => {
    if (status === "OK") {
      map.setCenter(results[0].geometry.location);
      new google.maps.Marker({ map, position: results[0].geometry.location });
    }
  });

  const input = document.getElementById("search");
  const autocomplete = new google.maps.places.Autocomplete(input, { fields: ["geometry", "formatted_address"] });
  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace();
    if (place.geometry) map.panTo(place.geometry.location);
  });
}

ما الذي يُحتسب طلبًا. تحميل الخرائط وطلبات البلاطات مجانية. كل استدعاء للفئة Geocoder وكل جلسة Autocomplete وكل استدعاء للخدمة ElevationService يُحتسب طلبًا واحدًا.

عنصر التحكم Bing Maps V8 Web Control

يتوقف عنصر التحكم V8 مع بقية Bing Maps for Enterprise. حمّل عنصر التحكم من bing.mygeocode.com وستستمر مساحة الأسماء Microsoft.Maps في العمل، وخلفها بلاطاتنا والترميز الجغرافي والاقتراح التلقائي الخاص بنا.

<script async defer
  src="https://www.bing.com/api/maps/mapcontrol?key=YOUR_BING_KEY&callback=loadMap">
</script>

<script async defer
  src="https://bing.mygeocode.com/api/maps/mapcontrol?key=YOUR_MYGEOCODE_KEY&callback=loadMap">
</script>

function loadMap() {
  const map = new Microsoft.Maps.Map("#map", { center: new Microsoft.Maps.Location(47.6396, -122.13), zoom: 12 });

  Microsoft.Maps.loadModule("Microsoft.Maps.Search", () => {
    const search = new Microsoft.Maps.Search.SearchManager(map);
    search.geocode({
      where: "1 Microsoft Way, Redmond, WA",
      callback: (result) => {
        const loc = result.results[0].location;
        map.setView({ center: loc, zoom: 15 });
        map.entities.push(new Microsoft.Maps.Pushpin(loc));
      }
    });
  });
}

ما الذي يُحتسب طلبًا. تحميل الخرائط والبلاطات مجاني. كل استدعاء للدالة geocode وreverseGeocode وكل جلسة اقتراح تلقائي يُحتسب طلبًا واحدًا.

Mapbox GL JS وmapbox-gl-geocoder

احتفظ بشيفرة الخريطة واستبدل عنواني URL: النمط، ومصدر أداة الترميز الجغرافي. MapLibre GL JS (النسخة المتفرعة مفتوحة المصدر) هي أداة العرض الموصى بها، ويعمل Mapbox GL JS v1 أيضًا. تتضمن mapbox-gl-geocoder خيار origin، لذا لا يحتاج عنصر التحكم في الترميز الجغرافي إلى أي تغيير في الشيفرة سوى ذلك.

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  accessToken: "YOUR_MAPBOX_TOKEN"
});
map.addControl(new MapboxGeocoder({
  accessToken: "YOUR_MAPBOX_TOKEN",
  mapboxgl: mapboxgl
}));

const map = new maplibregl.Map({
  container: "map",
  style: "https://mapbox.mygeocode.com/styles/v1/mygeocode/streets?access_token=YOUR_MYGEOCODE_KEY"
});
map.addControl(new MapboxGeocoder({
  accessToken: "YOUR_MYGEOCODE_KEY",
  origin: "https://mapbox.mygeocode.com",
  mapboxgl: maplibregl
}));

// Direct calls keep the same shape too
const res = await fetch(
  "https://mapbox.mygeocode.com/geocoding/v5/mapbox.places/Oxford%20Street%20London.json?access_token=YOUR_MYGEOCODE_KEY",
  { headers: { "X-API-Key": "YOUR_KEY" } }
);
const { features } = await res.json();
map.flyTo({ center: features[0].center, zoom: 15 });

ما الذي يُحتسب طلبًا. البلاطات والصور الثابتة مجانية. كل طلب ترميز جغرافي يُحتسب طلبًا واحدًا، ويؤخّر عنصر التحكم ضغطات المفاتيح في الإكمال التلقائي كالمعتاد.

إضافات الترميز الجغرافي في Leaflet

يتواصل Leaflet مع خدمات الترميز الجغرافي عبر الإضافات، والإضافات الشائعة تقبل عنوان URL للخدمة. وجّه Leaflet Control Geocoder أو leaflet-geosearch إلى osm.mygeocode.com واستخدم بلاطاتنا للخريطة الأساسية.

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors"
}).addTo(map);

L.Control.geocoder({
  geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);

L.tileLayer("https://tiles.mygeocode.com/streets/{z}/{x}/{y}.png?key=YOUR_MYGEOCODE_KEY", {
  attribution: "© My Geocode"
}).addTo(map);

L.Control.geocoder({
  geocoder: L.Control.Geocoder.nominatim({
    serviceUrl: "https://osm.mygeocode.com/",
    geocodingQueryParams: { key: "YOUR_MYGEOCODE_KEY" }
  })
}).addTo(map);

// leaflet-geosearch works the same way
import { OpenStreetMapProvider, GeoSearchControl } from "leaflet-geosearch";

const provider = new OpenStreetMapProvider({
  searchUrl: "https://osm.mygeocode.com/search",
  reverseUrl: "https://osm.mygeocode.com/reverse",
  params: { key: "YOUR_MYGEOCODE_KEY", addressdetails: 1 }
});
map.addControl(new GeoSearchControl({ provider, style: "bar" }));

ما الذي يُحتسب طلبًا. البلاطات مجانية. كل ترميز جغرافي وكل ترميز جغرافي عكسي يُحتسب طلبًا واحدًا.

واجهة HERE Maps API for JavaScript

حمّل حزم mapsjs من here.mygeocode.com وأنشئ المنصة كالمعتاد. تحتفظ H.Map وH.service.Platform وخدمة البحث بتواقيعها، مع البلاطات المتجهية والترميز الجغرافي منا.

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

<script src="https://here.mygeocode.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-mapevents.js"></script>

const platform = new H.service.Platform({ apikey: "YOUR_MYGEOCODE_KEY" });
const layers = platform.createDefaultLayers();
const map = new H.Map(document.getElementById("map"), layers.vector.normal.map, {
  center: { lat: 52.5304, lng: 13.3853 }, zoom: 13
});

platform.getSearchService().geocode(
  { q: "Invalidenstraße 116, Berlin" },
  (result) => {
    const { position } = result.items[0];
    map.setCenter(position);
    map.addObject(new H.map.Marker(position));
  },
  (err) => console.error(err)
);

ما الذي يُحتسب طلبًا. تحميل الخرائط والبلاطات مجاني. كل استدعاء للدالة geocode وreverseGeocode وautosuggest يُحتسب طلبًا واحدًا.

MapQuest.js

تغلّف MapQuest.js مكتبة Leaflet وتضيف L.mapquest.geocoding(). حمّل الحزمة من mapquest.mygeocode.com وعيّن مفتاحك كما كنت تفعل.

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

<script src="https://mapquest.mygeocode.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://mapquest.mygeocode.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

L.mapquest.key = "YOUR_MYGEOCODE_KEY";

const map = L.mapquest.map("map", {
  center: [41.8789, -87.6359],
  layers: L.mapquest.tileLayer("map"),
  zoom: 12
});

L.mapquest.geocoding().geocode("233 S Wacker Dr, Chicago, IL", (err, response) => {
  const loc = response.results[0].locations[0].latLng;
  map.setView(loc, 15);
  L.marker(loc, { icon: L.mapquest.icons.marker() }).addTo(map);
});

ما الذي يُحتسب طلبًا. البلاطات مجانية. كل طلب geocode وreverse وsearch-ahead يُحتسب طلبًا واحدًا.

بلاطات الخرائط وأنماطها

تستخدم كل أدوات التحميل أعلاه خدمة البلاطات نفسها، ويمكنك أيضًا استخدامها مباشرة من أي مكتبة.

الأنماط هي streets وlight وdark وoutdoors وsatellite. حركة البلاطات لا تُحتسب في الفوترة ولا تحتاج إلى مفتاح. تُرسم بلاطاتنا من بيانات OpenStreetMap وبياناتنا الخاصة، ويجب أن يعرض عنصر الإسناد © OpenStreetMap contributors وMy Geocode، وهو ما تضيفه أدوات التحميل أعلاه نيابة عنك.

المفاتيح في المتصفح

لا تحتاج بلاطات الخرائط وأنماطها وأدوات تحميل المكتبات أعلاه إلى أي مفتاح، لذا تعمل الخريطة نفسها دائمًا. أما استدعاءات الترميز الجغرافي والإكمال التلقائي والارتفاع التي تجريها المكتبات، فمرّرها عبر خادمك: تقبل أدوات التحميل المعامل proxy (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) وترسل تلك الاستدعاءات إليه، فيضيف خادمك المفتاح ويمرّر الطلب إلينا. وعندها تُترك العناصر النائبة YOUR_MYGEOCODE_KEY أعلاه فارغة.

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