Съдържание
Услугите, предлагани от API на Google Карти Javascript са толкова разнообразни, колкото функционални, имат качество, което се различава Google Maps От своите конкуренти тези услуги обикновено работят асинхронно, което позволява заявката да бъде отправена към външен сървър и методът за обратен разговор отговаря за обработката на отговорите.Една от силните страни на тези услуги е, че те са напълно съвместими с API класове и обекти. Можем от консултация с адреса на конкретна точка на картата ни до дори реализиране на изгледа на улицата.
Преди да преминем към примерите, нека видим някои от най -важните услуги, които ще използваме в този урок.
Гео кодиранеТази услуга ни позволява да трансформираме общи адреси в географски координати въз основа на географската ширина и дължина на дадена точка, това ни позволява да поставяме маркери или да позиционираме картата си, за да изпълняваме тези операции, API предоставя клас, наречен геокодер ().
Матрица за разстоянияТази услуга ни помага да изчислим разстоянието и продължителността на маршрута между множество точки, нещо, което се използва широко днес, за това имаме цел да google.maps.DistanceMatrixService и свързаните с него методи.
Изглед от улицатаОбслужване Изглед от улицата или street view ни предлага 360-градусова панорамна гледка в зоните, където има покритие, нещо, което ще направи нашите карти да се открояват без съмнение.
Не забравяйте, че тук описах подробно работата на API и обработката на събития в Google Maps и Въведение, за да разбера API на Javascript в Google Maps.
За да изпълним този пример, ще използваме услугата геокодер () Но както споменахме, това ни позволява да преобразуваме адрес в координата, това е добре, но за конвенционалния потребител това е нещо, което не вижда много полза от него, затова ще използваме обратен геокодер за да получим нужния ни адрес с едно щракване. Нека да видим стъпките, които трябва да следваме:
1- Първо, както вече знаем, включваме API, без да забравяме да използваме нашите идентификационни данни, в допълнение към това ще включим библиотеката на рисуване което ще ни позволи да реализираме функционалността на маркерите за рисуване, ние свързваме тази библиотека с нашите идентификационни данни със символа &, както ще видим по -долу:
2- Не можем да забравим стиловете за картата, които ще й дадат вида на визуализация на страницата, както и дефинирането на глобалните променливи, които ще имат глобален обхват във всички методи на нашия код:
var карта; var geocoder var изскачащ прозорец;
3- След това определяме нашия метод initializeMap () където първото нещо, което ще направим, е да декларираме нашия обект от тип геокодер помагайки ни от класа Геокодер () и със InfoWindow обектът за изскачащия прозорец, който ще покаже адреса на екрана:
функция initializeMap () {geocoder = нов google.maps.Geocoder (); popup = нов google.maps.InfoWindow (); 4- Включваме конвенционалните опции на картата като центъра, мащабирането и типа на базата, получаваме елемента СЛЪНЦЕ и ние създаваме екземпляр на метода Карта:
google.maps.visualRefresh = вярно; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Сега създаваме мениджъра за рисуване, който ще ни позволи да рисуваме маркери, за това ще направим екземпляр от DrawingManager, правим го видим в потребителския интерфейс и избираме кои режими ще се показват в контролата и в каква позиция ще бъдат те:
var drawingManager = нов 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 (карта); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- За да завършите обратен геокодер ще използваме услугата на геокод () и ще направим условно, за да проверим дали услугата връща валиден отговор, ако не го обработим, така че потребителят да знае, че е неуспешен и ако резултатът е правилен, ние извикваме нашия метод Показване на адреса ():
geocoder.geocode ({'latLng': markerPosition}, функция (резултати, състояние) {if (status == google.maps.GeocoderStatus.OK) {if (резултати) {ShowAddress (резултати [0], маркер);}} else {alert ("Service failed:" + status);}}); 8- И накрая, трябва само да изградим метода на Показване на адреса () който ще получи резултата от нашия обратен геокодер и позицията на маркера, с това можем да установим центъра и да покажем информацията за форматирания адрес без никакви проблеми:
функция ShowAddress (резултат, маркер) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Адрес: '+ result.formatted_address; popup.setContent (popupContent); popup.open (карта, маркер); } 9- Затваряме съответните тагове и добавяме частта от HTML кода, за да завършим нашия пример:
Намерете адрес на картата с едно щракване
10- Изпълняваме в нашия браузър и кликваме върху всяка точка на нашата карта и ще получим адреса, показан в изскачащия прозорец, който декларираме, той трябва да изглежда по следния начин:
Увеличете
The API на Google Карти Javascript ни предоставя доста полезни услуги, една от тях е матрица за разстояние което ни позволява да изчислим разстоянието и времето между множество точки, функционалност, която можем да използваме за внедряване на различни решения във всеки бизнес, от изчисляване на сроковете за доставка или установяване на най -оптималния маршрут между различни точки. Нека видим стъпките, които трябва да следваме, за да приложим тази функционалност между нашите карти.
1- Включваме нашия API заедно с библиотеката рисуване, както и стиловете за показване на нашата карта и контейнера на нашата матрица:
2- Ние дефинираме глобални променливи за използване в целия обхват на нашия код и във функцията initializeMap () Инициализираме масивите за обработка на географската ширина и дължина както на началната точка, така и на дестинацията:
var карта; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; функция initializeMap () {originLatLon = []; destinationLatLon = []; 3- След това в същата функция получаваме бутона и манипулатора на събития за него, допълнително инициализираме обекта за услугата на DistanceMatrixService както и брояча за маркерите и присвояване на резултата от масива на контейнер div:
var generatedBtnMatrix = document.getElementById ('generatedMatrix'); generatedBtnMatrix.addEventListener ('щракване', функция () {MatrixRequest ();}); distanceMatrixService = нов google.maps.DistanceMatrixService (); markerCount = 0; масив за резултати = document.getElementById ('масив за резултати'); 4- Включваме конвенционалните опции на картата като центъра, мащабирането и типа на базата, получаваме елемента СЛЪНЦЕ и ние създаваме екземпляр на метода Карта:
google.maps.visualRefresh = вярно; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Както в предишното упражнение създадохме мениджъра за рисуване, който ще ни позволи да рисуваме маркери, за това ще направим екземпляр от DrawingManager и ние предоставяме необходимите опции, активираме го и добавяме слушателя за събитието:
var drawingManager = нов google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (карта); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- След това извършваме валидирането, за да ограничим броя на разрешените дестинации и задаваме иконите, които ще използваме за нашите отметки:
markerCount ++; if (markerCount> 10) {alert ("Повече дестинации не са разрешени"); drawingManager.setMap (null); marker.setMap (null); връщане; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Сега остава само да създадем нашите функции, за да обработваме заявките, отправени към услугата на distanceMatrixService, първо създаваме този, който ще подготви свойството на заявката:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({произход: LatinSource, дестинации: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Ние създаваме функцията за обратно повикване и това ще ни позволи да получим отговора на услугата и в което ще включим необходимите валидации, в случай че услугата не успее да се справи с грешката по най -добрия начин:
функция getResultMatrix (резултат, състояние) {resultMatrix.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 елемент = елементи [j]; var distance = element.distance.text; var duration = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, разстояние, продължителност, i, j); }}} else {alert ('Не може да се получи масив:' + статус); } 9- Освен това създаваме функцията, която ще записва резултатите, получени в съответния div:
functionDivMatrixResults (originAddress, destinationAddress, разстояние, продължителност, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newContent; newContent = 'Начало ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Дестинация „ + countLetters (destinationAddressCount) +“:
'; newContent + = destinationAddress + '
'; newContent + = 'Съдбата: ' + разстояние +'
'; newContent + = 'Съдбата: ' + продължителност +'
'; newContent + = '
'; resultArray.innerHTML = existingContent + newContent; } 9- Накрая в нашия Javascript Ние обработваме броячите във функция, за да върнем името, съответстващо на брояча на маркера, който поставяме:
функция countLetters (count) {switch (count) {case 0: връщане на „Comics Store“; случай 1: връщане на „Магазин за видеоигри“; случай 2: връщане на „Comics Store“; случай 3: връщане на „Comics Store“; случай 4: връщане на „Магазин за видеоигри“; по подразбиране: return null; }} 10- Затваряме съответните тагове и добавяме частта от кода HTML за да завършим нашия пример:
Използвайте матрица за разстояние
11- Ние изпълняваме нашия пример в браузъра и за да визуализираме работата на нашата карта, ще поставим 4 точки на интерес и ще натиснем бутона Генериране на матрица за разстояние:
Увеличете
За да завършим този урок, ще внедрим услугата Изглед от улицата, Това е сравнително прост пример, но добавеният към другите налични услуги ще направи нашите карти да се открояват над останалите, нека видим какво трябва да направим, за да внедрим тази услуга:
1- Включваме API и дефинираме съответните стилове, в този пример няма да използваме библиотеката за рисуване, така че тя няма да бъде включена:
2- Ние дефинираме нашите глобални променливи и създаваме нашата функция initializeMap () С конвенционалните опции, център на нашата карта, мащабиране и тип база, получаваме елемента СЛЪНЦЕ и ние създаваме екземпляр на метода Карта:
var карта; var geocoder; var streetView; функция initializeMap () {popup = нов google.maps.InfoWindow (); geocoder = нов google.maps.Geocoder (); google.maps.visualRefresh = вярно; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 3- В рамките на нашата функция ние наричаме услугата на Изглед от улицата и след това създаваме функция за задаване на нейните опции като местоположение и гледна точка:
streetView = map.getStreetView (); } функция setOptionsStreetView (местоположение) {streetView.setPosition (местоположение); streetView.setPov ({заглавие: 0, сърбеж: 10}); } 4- Накрая създаваме функциите, за да можем да превключваме между конвенционалния изглед на картата и Streer View, нека видим как изглеждат тези:
функция showMap () {streetView.setVisible (false); } функция showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Затваряме съответните тагове и добавяме частта от кода HTML за да завършим нашия пример:
Карта с Street View
6- Пускаме нашия пример в браузъра и натискаме бутона Показване на Street View за визуализиране на функционалността, както можем да видим на следното изображение:
Увеличете
С това приключваме този урок, тъй като успяхме да оценим услугите, присъстващи в API на Google Карти Javascript Те ни позволяват да разширим функционалностите на нашите карти много повече, като го позиционираме като опция, която да вземем предвид в системите, които прилагаме, които трябва да използват изчисления за местоположение и време и / или разстояние.
Напомням ви за този урок, който също ще ви бъде полезен: Научете използването на вектори в Google MapsХареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
