Совместимые замены на JavaScript для картографических библиотек и библиотек геокодирования

На этой странице

• API Google Maps для JavaScript
• Веб-элемент управления Bing Maps V8
• Mapbox GL JS и mapbox-gl-geocoder
• Плагины геокодирования для Leaflet
• HERE Maps API для JavaScript
• MapQuest.js
• Тайлы и стили карт
• Ключи в браузере

API Google Maps для JavaScript

Загружайте картографическую библиотеку с 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

Элемент управления 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 для 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 выше при этом остаются пустыми.

• Ваш прокси может добавить кеширование и собственные лимиты, чего браузеры не умеют.
• Тогда запросы приходят с адреса вашего сервера, и один ключ обслуживает любое число посетителей.