Карты — это способ ориентироваться в мире. Они дают возможность инспектировать каждое место на Земле, открывая путь к таким услугам, как маршрутизация и состав почвы. В этой статье я рассмотрю API Карт Google (и некоторые альтернативы) и интегрирую его с Rails.
Репозиторий исходного кода
Исходный код доступен в репозитории Github . Каждая функция является отдельным коммитом, поэтому вы можете следить за ходом обучения, используя git checkout
Предпосылки
- Базовые знания Ruby on Rails с использованием RailsBricks .
- Средние знания JavaScript
- Как работают веб-карты. Эту статью стоит прочитать, если вы новичок в игре.
Наша цель — сделать интеграцию карт с Rails простой. В этом учебном пособии описываются точные шаги по интеграции Google Maps с некоторыми полезными жемчужинами Rails. Наконец, кратко рассмотрим альтернативы Google Maps, такие как популярные библиотеки с открытым исходным кодом Leaflet.js и MapBox .
Инициализация карты
В прошлом Google Maps требовал ключ API, однако этот ключ API больше не является обязательным для V3 . Если вы используете другую версию, выполните следующие действия:
Если вы используете Google Maps V3, просто пропустите эту часть
-
Перейдите в консоль Google API
-
Нажмите API и авторизация -> API.
-
Активируйте Google Maps JavaScript API v3, нажав кнопку «Статус», чтобы включить.
-
Нажмите на учетные данные -> Создать новый ключ -> ключ браузера
-
Убедитесь, что
ACCEPT REQUESTS FROM THESE HTTP REFERERS (WEB SITES)пусто или содержит ваш домен, как на рисунке ниже.
НОТА:
Не каждый аспект карты рассматривается в материале ниже. Для получения более подробной информации вы можете посетить документацию по Google Maps JavaScript .
Загрузка карты
Сначала создайте проект с помощью RailsBrick ( вы можете использовать любой инструмент для создания приложений rails ). Это создатель приложений для рельсов с базовыми функциональными возможностями. Вы можете получить, как использовать это от вводного видео здесь .
Чтобы инициализировать карту на нашей домашней странице, создайте div с идентификатором map-canvas в домашнем представлении ( /app/views/home.erb ). Оберните этот div в другой с идентификатором map-container , который будет использоваться для добавления стиля к карте.
Первый: вот код домашнего просмотра:
<% title("Home Page") %> <h1>Google Maps Tut</h1> <div id="map-container"> <div id="map-canvas"></div> </div>
Добавьте немного CSS. Откройте файл с именем framework и overrides.css.scss , который является частью шаблона RailsBricks и используется для переопределения стилей Bootstrap.
Второе: добавьте следующие стили:
#map-container { height: 400px; border-radius: 16px 16px; border-color: #fff; border-style: solid; box-shadow: 2px 2px 10px #B1B1B1; margin-top: 25px; border-width: 7px; } #map-canvas { height: 384px; width: 100%; }
Как вы можете видеть в приведенном выше CSS, мы установили карту-контейнер на фиксированную высоту 400 пикселей и добавили немного стиля рамки. Последний шаг для получения исходной рабочей карты — это создать папку с именем «map» в app / assets / javascript / map и добавить файл с именем gmap.js. Теперь карта должна выглядеть так:
НОТА:
Если контроллер масштабирования карты не отображается должным образом, это противоречит стилю Bootstrap для изображений и надписей. Просто добавьте следующие переопределения в ваш файл CSS ( framework и overrides.css.scss ):
/* Bootstrap Css Map Fix*/ #map-container #map-canvas img { max-width: none; } /* Bootstrap Css Map Fix*/ #map-container #map-canvas label { width: auto; display:inline; }
Рисование на карте
Основные маркеры
API Карт Google содержит объект маркера, позволяющий легко создавать простые маркеры. Объект «Маркер» содержит такие атрибуты, как положение маркера, заголовок маркера и карта, на которой расположен маркер.
Чтобы избежать повторения кода, создайте функцию с именем createMarker с параметрами coords , map и title :
var marker; function createMarker(coords, map, title){ marker = new google.maps.Marker({ position: coords, map: map, title: title }); }
Пользовательские Маркеры
У объекта «Маркер» есть атрибут «значок», который может принимать путь или объект изображения . Мы создадим две функции: одну для создания изображения и одну для создания собственного маркера . Чтобы сделать маркер перетаскиваемым, просто добавьте атрибут, перетаскиваемый со значением true . Кроме того, API Карт Google поддерживает два типа анимации для маркера: DROP и BOUNCE .
Создайте функцию с именем createImage которая будет возвращать объект изображения, используемый нашим пользовательским маркером. Его размер составляет 32 × 32 пикселей, а его происхождение (0, 0).
function createImage(url){ var image = { url: url, // This marker is 32 pixels wide by 32 pixels tall. size: new google.maps.Size(32, 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) }; return image; }
Затем создайте функцию с именем createCustomMarker чтобы выполнить фактическую работу по созданию объекта маркера. Он принимает координаты, объект карты и заголовок для маркера. Используйте функцию createImage чтобы вернуть правильное изображение для нашей иконки.
function createCustomMarker(coords,map,title){ marker = new google.maps.Marker({ position: coords, map: map, title: title, icon: createImage("/assets/icon.png") }); }
InfoWindow
Infowindow — это всплывающая подсказка для отображения содержимого (текста или изображений). Вы можете добавить информационное окно к маркеру или на указанную longitude и latitude ( lon и lat для краткости). Объект InfoWindow принимает объект InfoWindowOptions .
function createInfoWindow(text){ var infowindow = new google.maps.InfoWindow({ content: text }); return infowindow; }
Поместите следующий код в функцию initialize()
// add infowindow when clicking on the simple marker marker var info = createInfoWindow("Congratulations!"); google.maps.event.addListener(marker, 'click', function() { info.open(map,marker); });
Этот код создаст информационное окно с именем info и поместит в него текст «Поздравляем!». Слушатель событий обрабатывает событие click на маркере, чтобы открыть информационное окно.
Рисование линий
Рисование линий требует серии координат для соединения. API Карт Google предоставляет объект Polyline для рисования линий с атрибутами stroke_color , weight и opacity , а также с добавлением значков, символов или анимации.
Простая линия
// drawing static polyline var lineCoordinates = [ new google.maps.LatLng(30.055487, 31.279766), new google.maps.LatLng(30.223356, 31.324345), new google.maps.LatLng(30.345656, 31.567677), new google.maps.LatLng(30.565678, 31.676887) ]; createPolyline(map, lineCoordinates, lineSymbol); var linePath; function createPolyline(map,lineCoordinates,lineSymbol){ linePath = new google.maps.Polyline({ path: lineCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); linePath.setMap(map); }
Мы определяем массив lineCoordinates с координатами для ломаной линии. Функция createPolyline фактически создает полилинию, устанавливая ее path с lineCoordinates массива lineCoordinates . Атрибут geodesic true , говоря Google Maps, чтобы позаботиться о сложной математике для нас. Присвойте ему цвет обводки #FF0000 , непрозрачность 1 и вес обводки 2, чтобы сделать его видимым. После того, как у нас есть готовый объект полилинии, добавьте его на карту с setMap функции setMap .
Простая линия с тире.
Рисование пунктирной линии — это просто вопрос создания стиля и указания линии для его использования. Ниже переменная lineSymbol добавляется к полилинии. Обратите внимание, что lineSymbol имеет путь для следования и масштаб 4. Функция createPolyline модифицирована для использования lineSymbol в качестве повторяющегося значка.
var lineSymbol = { path: 'M 0,-1 0,1', scale: 4, strokeOpacity: 1, strokeColor: '#393' }; // modify the createPolyline function to contain the symbol var linePath; function createPolyline(map, lineCoordinates, lineSymbol){ linePath = new google.maps.Polyline({ path: lineCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2, icons: [{ // this Array is for adding symbols to the line icon: lineSymbol, offset: '100%' }] }); linePath.setMap(map); }
Анимированные тире
Мы даже можем анимировать animateCircle , добавив функцию animateCircle которая перемещает значки вдоль линии, изменяя смещение. Нет даже необходимости изменять функцию createPolyline .
function animateCircle() { var count = 0; window.setInterval(function() { count = (count + 1) % 200; var icons = linePath.get('icons'); icons[0].offset = (count / 2) + '%'; linePath.set('icons', icons); }, 20); } //modify the `createPolyline` function to be like the following var linePath; function createPolyline(map, lineCoordinates, lineSymbol){ linePath = new google.maps.Polyline({ path: lineCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2, icons: [{ // this Array is for adding symbols to the line icon: lineSymbol, offset: '0', repeat: '20px' }] }); linePath.setMap(map); }
Затем вызовите animateCircle() после создания полилинии с createPolyline функции createPolyline .
Созданная пользователем динамическая полилиния
В следующем коде мы добавляем параметры / атрибуты полилинии к переменной и используем ее для создания полилинии. Это не сильно отличается от приведенных выше примеров кода. Добавление слушателя события click на карту, который добавляет точку к нашей линии, позволяет пользователю рисовать по желанию.
// drawing dynamic polyline var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 }; poly = new google.maps.Polyline(polyOptions); poly.setMap(map); google.maps.event.addListener(map, 'click', addLatLng); function addLatLng(event){ var path = poly.getPath(); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path.push(event.latLng); }
Рисование полигонов
Полигоны похожи на полилинии в том, что они нарисованы серией координат. У многоугольника есть stroke и fill , которые можно настроить. Мы добавим координаты для многоугольника вручную в массив с именем polygonCoords и передадим его в новую функцию с именем drawingPolygon . Эта функция создает полигон и устанавливает его пути к координатам, добавленным в массив polygonCoords . Полигоны также можно draggable и editable .
Простой многоугольник
// drawing polygon var polygonCoords = [ new google.maps.LatLng(30.055487, 31.279766), new google.maps.LatLng(30.466465, 31.118292), new google.maps.LatLng(30.321384, 31.75737), new google.maps.LatLng(30.055487, 31.279766) ]; // Construct the polygon. drawingPolygon(polygonCoords); function drawingPolygon(polygonCoords) { var polygon = new google.maps.Polygon({ paths: polygonCoords, strokeColor: '#FF00FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, draggable:true, editable: true }); polygon.setMap(map); }
Рисование на карте с использованием библиотеки чертежей
API Карт Google поддерживает библиотеку рисунков, которая обеспечивает графический интерфейс. Этот графический интерфейс позволяет пользователям рисовать полилинии, многоугольники, круги, маркеры и треугольники на карте.
Чтобы загрузить библиотеку чертежей на карту, просто включите URL-адрес API карт: &libraries=drawing и начните использовать объект DrawingManager .
Ссылка на источник API должна выглядеть так:
https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing
Инициализируйте объект DrawingManager :
// trying the drawing liberary var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: null, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE ] }, markerOptions: { icon: "/assets/icon.png" } }); drawingManager.setMap(map);
Конструктор DrawingManager позволяет управлять инструментами рисования карты (элементами управления), определяя, какое наложение будет отображаться, его положение на карте и его начальное состояние. Если для drawingMode значение null это означает, что по умолчанию оно не будет определенным элементом управления наложением. По умолчанию его можно использовать с наложением ломаной линии, изменив значение null на google.maps.drawing.OverlayType.POLYLINE .
Второй аргумент — drawingControl который принимает значение true для отображения drawingControl управления или значение false для его скрытия. drawingControlOptions указывает контрольную позицию на карте. Google Maps предоставляет различные места для размещения своих элементов управления, такие как TOP_CENTER , TOP_RIGHT , BOTTOM_LEFT и так далее.
Аргументы также указывают доступные drawingModes , массив доступных констант google.maps.drawing.OverlayType таких как CIRCLE , POLYLINE , POLYGONS , RECTANGLE , MARKER . Вы также можете назначить каждому наложению определенные свойства, как мы делали в предыдущих фрагментах кода.
Последний шаг — установить карту на drawingManager .
Добавление картографических сервисов
Геокодирование и обратное геокодирование
API Карт Google предоставляет класс Geocoder для Geocoder получения координатных местоположений известных адресов (геокодирование) и наоборот (обратное геокодирование).
Хотя службе больше не требуется ключ API, она ограничивает число геокодов до 2500 в день и требует, чтобы получающееся приложение отображало данные с помощью карты Google. Возвращаемые данные — либо JSON, либо XML.
var geocoding = new google.maps.Geocoder(); $("#submit_button_geocoding").click(function(){ codeAddress(geocoding); }); $("#submit_button_reverse").click(function(){ codeLatLng(geocoding); });
Получить координаты по геокодированию
Здесь мы получаем координаты, вводя адрес в поле ввода.
function codeAddress(geocoding){ var address = $("#search_box_geocoding").val(); if(address.length > 0){ geocoding.geocode({'address': address},function(results, status){ if(status == google.maps.GeocoderStatus.OK){ map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } else { alert("Search field can't be blank"); } }
Получить адрес с помощью обратного геокодирования
В этом случае мы latlng переменную latlng объекту geocode чтобы сгенерировать местоположение (адрес) на карте.
function codeLatLng(geocoding) { var input = $('#search_box_reverse').val(); console.log(input); var latlngbounds = new google.maps.LatLngBounds(); var listener; var regex = /([1-9])+\.([1-9])+\,([1-9])+\.([1-9])+/g; if(regex.test(input)) { var latLngStr = input.split(",",2); var lat = parseFloat(latLngStr[0]); var lng = parseFloat(latLngStr[1]); var latLng = new google.maps.LatLng(lat, lng); geocoding.geocode({'latLng': latLng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if(results.length > 0) { //map.setZoom(11); var marker; map.setCenter(results[1].geometry.location); var i; info = createInfoWindow(""); for(i in results){ latlngbounds.extend(results[i].geometry.location); marker = new google.maps.Marker({ map: map, position: results[i].geometry.location }); google.maps.event.addListener(marker, 'click', (function(marker,i) { return function() { info.setContent(results[i].formatted_address); info.open(map,marker); } })(marker,i)); } map.fitBounds(latlngbounds); listener = google.maps.event.addListener(map, "idle", function() { if (map.getZoom() > 16) map.setZoom(16); google.maps.event.removeListener(listener); }); } } else { alert("Geocoder failed due to: " + status); } }); } else { alert("Wrong lat,lng format!"); } }
Генерация маршрутов
API Google Map предоставляет отличный сервис для расчета маршрутов между двумя и более адресами. Этот сервис может быть включен путем инициализации google.maps.DirectionsService , который не принимает параметров, но имеет один метод с именем route() . Этот метод принимает два параметра: объект из google.maps.DirectionsRequest и функцию обратного вызова.
Основные свойства DirectionRequest — это origin , destination и travelMode который определяет способ транспортировки. DirectionsStatus содержит статус ответа для запроса направлений.
Для предоставления результирующих маршрутов существует DirectionsRenderer , который не принимает параметров и имеет метод setMap для определения карты и метод setDirections который устанавливает возвращаемый ответ.
Для более подробной информации о службе маршрутов, прочитайте этот учебник
var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); directionsDisplay.setMap(map); var request = { origin: "Mansoura, Daqahlia, Egypt", destination: "Cairo, Egypt", travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { //Check if request is successful. if (status == google.maps.DirectionsStatus.OK) { console.log(status); directionsDisplay.setDirections(response); //Display the directions result } });
Элементы управления картой
Google Maps предоставляет элементы управления на карте для управления и манипулирования пользовательским интерфейсом карты. Эти элементы управления могут быть отключены, перемещены или даже настроены с новой функциональностью.
Доступные элементы управления:
- Управление масштабированием
- Панорамирование
- Управление масштабом
- Управление MapType
- Контроль улиц
- Поверните управление
- Обзор карты управления
Элементы управления пользовательского интерфейса по умолчанию можно отключить, добавив disableDefaultUI: true к параметрам карты.
Чтобы удалить один из элементов управления по умолчанию, добавьте его в качестве атрибута в MapOptions , например, panControl: true , zoomControl: false .
var mapOptions = { center: new google.maps.LatLng(30.055487, 31.279766), zoom: 8, mapTypeId: google.maps.MapTypeId.NORMAL, panControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.LEFT_CENTER }, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"] }, scaleControl: false, streetViewControl: true, overviewMapControl: true };
Пользовательские стили карты
Эта функция дает возможность манипулировать стандартным интерфейсом представления базовой карты.
Представление карты состоит из двух характеристик: элементы карты — дороги, парк, горы и т. Д. И стили для различных элементов карты.
Поправка: в массиве стилей допустимо ограниченное количество символов, что в случае превышения предотвращает применение стиля к карте.
Чтобы создать собственный стиль карты, выполните следующие действия:
Сначала: создайте массив стилей с двумя основными свойствами MapFeatures и стайлерами :
var mapstyle = [ { "featureType": "administrative.locality", "elementType": "labels.icon", "stylers": [ { "invert_lightness": true }, { "color": "#e40952" }, { "visibility": "on" } ] },{ "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "hue": "#5eff00" }, { "color": "#282744" }, { "weight": 0.1 }, { "saturation": -56 }, { "lightness": 22 }, { "gamma": 3.91 } ] } ]
Второе: установите mapTypeId в опциях карты:
var mapOptions = { center: new google.maps.LatLng(30.055487, 31.279766), zoom: 8, mapTypeId: google.maps.MapTypeId.NORMAL, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"] } };
В-третьих: создайте экземпляр StyledMapType , указав предопределенный массив mapstyle и имя карты. Имя появится в элементе управления как опция стиля.
var styledMap = new google.maps.StyledMapType(mapstyle, {name: "styled map"}); map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
В-четвертых: добавьте наш индивидуальный стиль карты в карту mapTypes :
map.mapTypes.set("map_style", styledMap);
Пятое. Установите идентификатор mapType для нашей стилизованной карты:
map.setMapTypeId("map_style");
Полезные Rails Gems
Geocoder
Geocoder Gem обеспечивает геокодирование, обратное геокодирование, поиск близлежащих мест, определение расстояний и картографический сервис для Ruby.
НОТА:
Геокодер поддерживает использованиеrails3иrails4, есть еще одна ветвь дляrails2.
Geocoder устанавливается как любой гем Ruby с использованием gem install geocoder или путем добавления gem "geocoder" в Gemfile и запускается bundle install .
Вы должны добавить два поля с плавающей запятой (lat, lng) к любой модели, используемой для хранения значений широты и долготы после извлечения их по адресу или почтовому индексу следующим образом:
rails generate migration AddLatitudeAndLongitudeToModel lat:float lng:float rake db:migrate
Также добавьте в модель следующее, чтобы указать, какой сервис будет использоваться (геокодер или обратный геокодер):
geocoded_by :address # auto-fetch coordinates and the condition is for preventing fetching the same address more than once after_validation :geocode, if: :address_changed?
Этот full_street_address должен быть реализован в модели для создания читаемого адреса.
НОТА:
Geocoder поддерживает некоторые популярные базы данных, такие как (MySQL, PostgreSQL, MongoDB).
Geocoder также gem предоставляет вам простой способ переключения между различными поставщиками геокодирования.
GMaps4rails
GMaps4rails — это потрясающая жемчужина, которая обеспечивает геокодирование и карту местоположений. Он использует JS для генерации фильтров при рендеринге маркеров. Он также имеет функцию геокодирования, которая вычисляет простые значения lng .
Вы можете комбинировать этот драгоценный камень с особенностями драгоценного камня Geocoder, представляя результаты на карте, используя GMaps4rails .
Установка
Сначала: добавьте следующую строку в ваш файл Gemfile:
gem 'gmaps4rails
Затем запустите bundle install
Второе: добавьте div, чтобы держать карту:
<div style='width: 800px;'> <div id="map" style='width: 800px; height: 400px;'></div> </div>
Третье: добавьте сценарии Google в свой макет application.html.erb :
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script> <script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
В-четвертых: требуется библиотека underscore.js , потому что она используется в Gmaps4rails. В вашем Rails application.js :
//= require underscore //= require gmaps/google
Теперь создайте карту следующим образом:
handler = Gmaps.build('Google'); handler.buildMap( { provider: { disableDefaultUI: true // here you can pass other Google Maps API options here }, internal: { id: 'map' } }, function() { markers = handler.addMarkers([ { "lat": 0, "lng": 0, "picture": { "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png", "width": 36, "height": 36 }, "infowindow": "hello!" } ]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); } );
Для получения более подробной информации об этом драгоценном камне, перейдите по этой ссылке .
Альтернативы Google Maps
Leaflet.js
Leaflet — это современная библиотека JavaScript для встраивания карт, которая приобрела популярность благодаря простоте и легкости реализации маркеров, наложений и манипулирования различными компонентами карты. Листовка может быть дополнена огромным набором доступных плагинов . Он использует разрешающую лицензию BSD с открытым исходным кодом, поэтому его можно добавить на любой сайт без юридических проблем. Также он поддерживает несколько поставщиков карт, включая OpenStreetMap, MapQuestOpen, Stamen, Esri и OpenWeatherMap.
Установка
Загрузите его с официального сайта leaflet.com . Он доступен в виде файла .zip или ветки на github .
Отрывок кода, иллюстрирующий простоту Leaflet:
// create a map in the "map" div, set the view to a given place and zoom var map = L.map('map').setView([51.505, -0.09], 13); // add an OpenStreetMap tile layer L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // add a marker in the given location, attach some popup content to it and open the popup L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup. <br> Easily customizable.') .openPopup();
Проверьте брошюру быстрый старт для получения дополнительной информации.
MapBox
MapBox — прекрасный инструмент, который дает гибкость при создании карт. Он имеет возможность создавать собственные карты с прекрасными слоями и множеством пользовательских функций с помощью приложения для загрузки TileMill (студия дизайна карт). Или вы можете создавать веб-приложения MapBox с пользовательскими маркерами и наложениями, используя JavaScript API.
инсталлятора
Все, что вам нужно, это учетная запись на MapBox . После того как вы создали несколько карт в MapBox, эти идентификаторы карт используются для интеграции их с вашим веб-приложением.
В этом примере вы познакомитесь с использованием MapBox с JavaScript.
После создания вашей карты в MapBox включите в свой проект библиотеку Mapbox.js.
Первое: инициализировать карту:
var map = mapbox.map('map');
Второе: установите диапазон масштабирования и центральную точку масштабирования карты:
map.setZoomRange(5, 15); map.centerzoom({ lat: 37.871385, lon: -99.228516 }, 5);
Третье: добавьте пользовательский слой, который вы создали на MapBox .
map.addLayer(mapbox.layer().id('YOUR-MAP-ID-HERE'));
После этого вы можете добавить на карту больше объектов, таких как маркеры, элементы пользовательского интерфейса (полноэкранный режим, масштабирование) и так далее.
НОТА:
Это не подробное руководство по использованию MapBox, но оно представляет его в качестве альтернативы Google Maps.
Резюме
Этот учебник дает базовое понимание того, как создавать карты и общие концепции карт. Надеемся, что теперь вы можете создать карту, соответствующую вашим потребностям, используя любой API карты, который вы выберете.