Сервисы, предлагаемые API Javascript Google Maps, разнообразны и функциональны, отличаются качеством, которое отличает Google Maps от конкурентов, эти сервисы обычно работают асинхронно, что позволяет отправлять запрос на внешний сервер и Метод обратного вызова отвечает за обработку ответов.
Одной из сильных сторон этих сервисов является то, что они полностью совместимы с классами и объектами API. Мы можем проконсультироваться с адресом конкретной точки на нашей карте, чтобы даже реализовать просмотр улиц.
API сервисы
Прежде чем перейти к примерам, давайте рассмотрим некоторые из наиболее важных сервисов, которые мы будем использовать в этом руководстве.
Географическое кодирование
Этот сервис позволяет нам преобразовывать общие адреса в географические координаты, основанные на широте и долготе точки, это позволяет нам размещать маркеры или позиционировать нашу карту, для выполнения этих операций API предоставляет класс, называемый geocoder () .
Матрица расстояний
Этот сервис помогает нам рассчитать расстояние и продолжительность маршрута между несколькими точками, что часто используется сегодня, для этого у нас есть объект google.maps.DistanceMatrixService и связанные с ним методы.
Просмотр улиц
Служба просмотра улиц или улиц предлагает панорамные виды на 360 градусов в областях, где есть покрытие, и это, без сомнения, выделяет наши карты.
Помните, что здесь я подробно описываю работу API и управления событиями в Картах Google и Введение, чтобы понять API Javascript в Картах Google.
Найти адрес одним кликом
Для выполнения этого примера мы будем использовать службу геокодера (), но, как мы уже упоминали, это позволяет преобразовать адрес в координату, это хорошо, но для обычного пользователя это не очень полезно, поэтому мы будем использовать геокодер наоборот чтобы получить адрес, который нам нужен, одним щелчком мыши. Давайте посмотрим, какие шаги мы должны выполнить:
1 - Во-первых, поскольку мы знаем, что мы включаем API, не забывая использовать наши учетные данные, в дополнение к этому мы включим библиотеку чертежей, которая позволит нам реализовать функциональность маркеров чертежа, эта библиотека объединяет его с нашими учетными данными с символом &, как мы увидим ниже:
2 - Мы не можем забыть стили для карты, которая даст вам тип визуализации на странице, а также определим глобальные переменные, которые будут иметь глобальный охват во всех методах нашего кода:
html {height: 100%} body {height: 100%; поле: 5; } #mapaDiv {width: 800px; высота: 500 пикселей; } карта вар; var geocoder var popup; 3 - После этого мы определяем наш метод инициализации Map (), где первое, что мы сделаем, это объявим наш объект геокодера, используя класс Geocoder () и с InfoWindow объект для всплывающего окна, которое будет отображать адрес на экране:
функция initialize Map () {geocoder = new google.maps.Geocoder (); popup = new google.maps.InfoWindow (); 4 - Мы включаем обычные параметры карты, такие как центр, масштаб и базовый тип, получаем элемент DOM и создаем экземпляр метода Map :
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), увеличение: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("mapDiv"); map = new google.maps.Map (mapElement, mapOptions); 5 - Теперь мы создаем менеджер чертежей, который позволит нам рисовать маркеры, для этого мы создадим экземпляр DrawingManager, сделаем его видимым в пользовательском интерфейсе и выберем, какие режимы будут отображаться в элементе управления и в каком положении они будут:
var drawingManager = new google.maps.drawing.DrawingManager ({DrawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}) ; 6 - Теперь мы включаем вновь созданную функциональность, добавляем прослушиватель для нашего события и для выполнения обратного геокодирования получаем положение широты и долготы нашего маркера с помощью метода getPosition () :
DrawingManager.setMap (map); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7. Чтобы завершить геокодер в обратном порядке, мы будем использовать сервис геокодирования () и создадим условие для проверки того, что сервис возвращает правильный ответ, но мы обрабатываем его, чтобы пользователь знал, что он не прошел, и если результат верен, мы вызываем наш метод. Показать адрес () :
geocoder.geocode ({'latLng': markerPosition}, функция (результаты, статус) {if (status == google.maps.GeocoderStatus.OK) {if (results) {ShowAddress (results [0], marker);}} else {alert ("Сбой службы:" + status);}}); 8. Наконец, мы можем только построить метод ShowDirection (), который будет получать результат нашего геокодера в обратном направлении и положение маркера, с этим мы можем без проблем установить центр и отобразить отформатированную информацию об адресе:
функция Показать адрес (результат, маркер) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = ' Address: ' + result.formatted_address; popup.setContent (popupContent); popup.open (карта, маркер); } 9 - Мы закрываем соответствующие теги и добавляем часть HTML-кода для завершения нашего примера:
Найти адрес на карте одним щелчком мыши
10 - Мы выполняем в нашем браузере и нажимаем в любом месте на нашей карте, и мы получим адрес, отображаемый во всплывающем окне, которое мы объявляем, он должен выглядеть следующим образом:
Эта функциональность может быть применена к любой точке нашей карты, нам просто нужно пройти через нее и выбрать другую точку.
Создание матрицы расстояний
API Google Maps Javascript предоставляет нам довольно полезные сервисы, одним из которых является матрица расстояний, которая позволяет нам вычислять расстояние и время между несколькими точками, функциональность, которую мы можем использовать для реализации различных решений в любом бизнесе, от расчета времени доставки или установите наиболее оптимальный маршрут между несколькими пунктами. Давайте посмотрим шаги, которые мы должны выполнить, чтобы реализовать эту функциональность между нашими картами.
1 - Мы включаем наш API вместе с библиотекой чертежей, а также стилями для развертывания нашей карты и контейнера нашей матрицы:
html {height: 100%} body {height: 100%; поле: 5px; } #mapaDiv {width: 100%; высота: 95%; } #matrixDirectionDiv {padding: 10px; ширина: 600 пикселей; высота: 500 пикселей; } #mapaContainerDiv {padding: 10px; плавать: слева; ширина: 800 пикселей; height: 500px} #matrixResult {overflow-y: auto; максимальная ширина: 600px; максимальная высота: 600 пикселей;} 2 - Мы определяем глобальные переменные для использования во всей области нашего кода и в функции инициализации Map () инициализируем массивы для обработки широты и долготы как источника, так и пункта назначения:
карта вар; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var matrix Result; функция initialize Map () {sourceLatLon = []; targetLatLon = []; 3 - Затем в той же функции мы получаем кнопку и обработчик события для нее, дополнительно инициализируем объект для службы DistanceMatrixService, а также счетчик для маркеров и присваиваем результат матрицы контейнеру div:
var generateMatrixBtn = document.getElementById ('generateMatrix'); generateBtn.addEventListener Matrix ('click', function () {Matrix Request ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); markerCount = 0; matrixResultado = document.getElementById ('matrixResultado'); 4 - Мы включаем обычные параметры карты, такие как центр, масштаб и базовый тип, получаем элемент DOM и создаем экземпляр метода Map :
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), увеличение: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("mapDiv"); map = new google.maps.Map (mapElement, mapOptions); 5 - Как и в предыдущем упражнении, мы создали менеджер чертежей, который позволит нам рисовать маркеры, для этого мы создадим экземпляр DrawingManager и предоставим вам необходимые параметры, включим его и добавим прослушиватель для события:
var drawingManager = new google.maps.drawing.DrawingManager ({DrawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}) ; DrawingManager.setMap (map); google.maps.event.addListener (DrawingManager, 'markercomplete', функция (маркер) { 6 - После этого мы проводим проверки, чтобы ограничить количество разрешенных пунктов назначения и установить значки, которые мы будем использовать для наших маркеров:
markerCount ++; if (markerCount> 10) {alert («Больше мест назначения не разрешено»); drawingManager.setMap (null); marker.setMap (null); возвращение; } if (markerCount% 2 === 0) {targetLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.webp'); } else {sourceLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.webp'); }}); 7. Теперь нам нужно только создать наши функции для обработки запросов к службе distanceMatrixService. Сначала мы создадим функцию, которая подготовит свойство запроса:
function Matrix Request () {distanceMatrixService.getDistanceMatrix ({originins: sourceLatLon, пункты назначения: destinationLatLon, travelMode: google.maps.TravelMode.DRIVING, }, getResult Matrix); } 8. Мы создаем функцию для обратного вызова, которая позволит нам получить ответ службы и в который мы включим необходимые проверки в случае, если службе не удается обработать ошибку наилучшим образом:
function getResultadoMatriz (результат, статус) {matrixResultado.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elements.length; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; var element = elements [j]; var distance = element.distance.text; var duration = element.duration.text; результаты MatrixDiv (originAddress, destinationAddress, расстояние, продолжительность, i, j); }}} else {alert ('Не удалось получить массив:' + status); } 9 - Дополнительно мы создаем функцию, которая будет записывать результаты, полученные в соответствующем div:
Результаты функции MatrixDiv (originAddress, destinationAddress, расстояние, длительность, originAddressCount, destinationAddressCount) {var существующиеContent = arrayResultado.innerHTML; var newContent; newContent = ' Origin' + countLetters (originAddressCount) + ':
«; newContent + = originAddress + '
«; newContent + = ' Destination' + countLetters (destinationAddressCount) + ':
«; newContent + = destinationAddress + '
«; newContent + = ' Пункт назначения: ' + расстояние + '
«; newContent + = ' Пункт назначения: ' + продолжительность + '
«; newContent + = '
«; arrayResultado.innerHTML = существующиеContent + newContent; } 9 - Наконец, в нашем Javascript мы обрабатываем счетчики в функции, чтобы вернуть соответствующее имя маркерному счетчику, который мы размещаем:
function tellLetters (count) {switch (count) {case 0: return 'Comics Store'; вариант 1: вернуть «Магазин видеоигр»; дело 2: вернуть «Магазин комиксов»; вариант 3: вернуть «Магазин комиксов»; дело 4: вернуть «Магазин видеоигр»; по умолчанию: вернуть ноль; }} 10 - Мы закрываем соответствующие теги и добавляем часть кода HTML для завершения нашего примера:
Использовать матрицу расстояний
11 - Мы выполняем наш пример в браузере и для визуализации работы нашей карты разместим 4 точки интереса и нажмите кнопку « Создать матрицу расстояний» :
Как мы можем видеть на нашем изображении, у нас есть четыре точки на карте, где матрица расстояний позволяет нам вычислять расстояние и время между каждой из них.
Реализация Street View
Чтобы завершить этот урок, мы реализуем сервис Street View, это довольно простой пример, но он добавлен к другим доступным сервисам, и наши карты будут выделяться среди других, давайте посмотрим, что мы должны сделать для реализации этого сервиса:
1 - Мы включаем API и определяем соответствующие стили, в этом примере мы не будем использовать библиотеку чертежей, поэтому она не будет включена:
html {height: 100%} body {height: 100%; поле: 5; } #mapaDiv {width: 800px; высота: 500 пикселей; } 2 - Мы определяем наши глобальные переменные и создаем нашу функцию инициализации Map () с обычными параметрами, центром нашей карты, масштабом и базовым типом, получаем элемент DOM и создаем экземпляр метода Map:
карта вар; вар геокодер; var streetView; функция initialize Map () {popup = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), увеличение: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("mapDiv"); map = new google.maps.Map (mapElement, mapOptions); 3 - В нашей функции мы вызываем сервис Street View, и после этого мы создаем функцию, которая устанавливает параметры, такие же как местоположение и точка зрения:
streetView = map.getStreetView (); } function setOptionsStreetView (location) {streetView.setPosition (location); streetView.setPov ({заголовок: 0, зуд: 10}); } 4 - Наконец, мы создаем функции, чтобы иметь возможность переключаться между обычным видом карты и видом Streer, давайте посмотрим, как они выглядят:
function showMap () {streetView.setVisible (false); } function showStreetView () {setOptionsStreetView (map.getCenter ()); streetView.setVisible (true); } 5 - Мы закрываем соответствующие теги и добавляем часть кода HTML для завершения нашего примера:
Карта улиц
6- Мы выполняем наш пример в браузере и нажимаем кнопку Показать просмотр улиц, чтобы визуализировать функциональность, как мы можем видеть на следующем рисунке:
Если мы хотим вернуться к стандартному виду нашей карты, нам просто нужно нажать кнопку Показать карту .
На этом мы завершаем этот урок, так как мы могли бы оценить сервисы, присутствующие в Javascript API Карт Google, позволяющие нам значительно расширить функциональные возможности наших карт, позиционируя его как вариант для учета в системах, которые мы внедряем и которым необходимо использовать местоположение и расчеты времени и / или расстояния.
Я напоминаю вам об этом уроке, который также будет вам полезен: узнайте, как использовать векторы в Картах Google
СТАТЬИ