AngularJS - Приложение для карт
Здравствуйте,野心勃勃 веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир AngularJS и Google Maps. К концу этого учебника вы сможете создать собственное интерактивное приложение с картой. Это же здорово, не так ли? Погружаемся!
Введение в AngularJS и Google Maps
Прежде чем мы начнем программировать, давайте поймем, что такое AngularJS и Google Maps.
AngularJS - это мощный JavaScript-фреймворк, который помогает нам создавать динамические веб-приложения. Это как超级геройский подручный для вашего HTML, который gives ему суперсилы для создания интерактивных и отзывчивых веб-страниц.
Google Maps, с другой стороны, это веб-сервис карт, который предоставляет детализированную информацию о географических регионах и объектах по всему миру. Это как иметь весь мир у вас под рукой!
Когда мы combine эти две технологии, мы можем создавать потрясающие картографические приложения. Волнительно, правда?
Настройка нашего проекта
Шаг 1: Включите AngularJS и API Google Maps
Сначала нам нужно включить необходимые библиотеки в наш HTML-файл. Вот как это делается:
<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>Мое приложение с картой AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- Наше приложение будет здесь -->
<script src="app.js"></script>
</body>
</html>В этом коде мы включаем AngularJS и API Google Maps. Замените 'YOUR_API_KEY' на ваш реальный ключ API Google Maps. Не волнуйтесь, если у вас его еще нет; мы рассмотрим, как его получить позже.
Шаг 2: Создайте наше приложение AngularJS
Теперь создадим наше приложение AngularJS. В новом файле под названием app.js добавьте следующий код:
var app = angular.module('mapApp', []);
app.controller('MapController', function($scope) {
// Мы добавим нашу логику карты здесь
});Этот код создает модуль AngularJS с именем 'mapApp' и контроллер с именем 'MapController'. Представьте модуль как контейнер для нашего приложения, а контроллер как мозг, который будет управлять нашей картой.
Создание нашей карты
Шаг 3: Инициализируйте карту
Давайте добавим код в наш контроллер, чтобы инициализировать нашу карту:
app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});Эта функция создает новую карту Google, centrated на Нью-Йорке (вы можете изменить координаты на любое место, которое вам нравится). Уровень zoom определяет, насколько близко карта увеличена.
Шаг 4: Добавьте карту в наш HTML
Теперь добавим div в наш HTML, где будет отображаться карта:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>Директива ng-controller сообщает AngularJS использовать наш MapController для этой части страницы. Директива ng-init вызывает функцию initMap, когда страница загружается.
Добавление маркеров
Шаг 5: Создайте функцию для добавления маркеров
Давайте улучшим наш контроллер, чтобы добавлять маркеры на нашу карту:
app.controller('MapController', function($scope) {
var map;
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});Эта новая функция addMarker создает маркер в указанной широте и долготе с заданным заголовком.
Шаг 6: Используйте функцию маркера
Теперь давайте используем нашу новую функцию, чтобы добавить маркеры:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Эмпайр Стейт Билдинг')">Добавить Эмпайр Стейт Билдинг</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Статуя Свободы')">Добавить Статую Свободы</button>
<script src="app.js"></script>
</body>Эти кнопки добавят маркеры для Эмпайр Стейт Билдинг и Статуи Свободы при нажатии.
Обработка ввода пользователя
Шаг 7: Создайте форму ввода
Давайте позволим пользователям добавлять свои собственные маркеры:
<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="Заголовок">
<input type="number" ng-model="newMarker.lat" placeholder="Широта">
<input type="number" ng-model="newMarker.lng" placeholder="Долгота">
<button type="submit">Добавить маркер</button>
</form>Шаг 8: Обработайте отправку формы
Добавьте эту функцию в ваш контроллер:
$scope.newMarker = {};
$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}Эта функция проверяет, заполнены ли все поля, добавляет маркер и затем очищает форму.
Заключение
Поздравления! Вы только что создали свое первое приложение с картами AngularJS. Теперь вы можете отображать карту, добавлять предопределенные маркеры и даже позволять пользователям добавлять свои собственные маркеры. Это только начало - с AngularJS и Google Maps можно сделать гораздо больше.
помните, ключ к тому, чтобы стать великим программистом, - это практика. Попробуйте добавить больше функций в ваше приложение с картами. Как насчет отображения информации при нажатии на маркер? Или добавления разных типов маркеров? Возможности безграничны!
Счастливого кодирования, будущие технические волшебники!
| Метод | Описание |
|---|---|
initMap() |
Инициализирует Google Map |
addMarker(lat, lng, title) |
Добавляет маркер на карту в указанной широте и долготе |
addCustomMarker() |
Об處вывает ввод пользователя для добавления пользовательского маркера |
Credits: Image by storyset