Возможно, многие из нас пользовались картами Google, где легко можно отыскать нужное место или ненужное. И довольно было бы неплохо инкорпорировать подобную функциональность на наш сайт. Это мы можем сделать, использовав соответсвующий api, который предоставляет Google.
Итак, создадим проект по шаблону Basic и назовем его, например, GoogleMaps. Пусть наше приложение будет отображать на карте Москвы некоторые станции метро. В реальности можно поставить более производственную задачу, например, у нас сайт сети магазинов, и нам надо выводить на карте маркерами все точки данной сети. Но для примера я буду выводить на карте несколько станций метро.
Вначале добавим в папку Models следующую модель Station:
public class Station { public int Id { get; set; } public string PlaceName { get; set; } // название места public double Traffic { get; set; } // пассажиропоток public string Line { get; set; } // линия метро public double GeoLong { get; set; } // долгота - для карт google public double GeoLat { get; set; } // широта - для карт google }
Думаю, тут все понятно. Последние два свойства GeoLong и GeoLat нужны нам, чтобы api googla связывал данный объект Station с определенным местом на карте по широте и долготе. Теперь добавим в папку Controllers простой контроллер HomeController со следующим содержанием:
using System; using System.Collections.Generic; using System.Web; using System.Web.Mvc; using GoogleMaps.Models; namespace GoogleMaps.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public JsonResult GetData() { // создадим список данных List<Station> stations = new List<Station>(); stations.Add(new Station() { Id = 1, PlaceName = "Библиотека имени Ленина", GeoLat = 37.610489, GeoLong = 55.752308, Line = "Сокольническая", Traffic = 1.0 }); stations.Add(new Station() { Id = 2, PlaceName = "Александровский сад", GeoLat = 37.608644, GeoLong = 55.75226, Line = "Арбатско-Покровская", Traffic = 1.2 }); stations.Add(new Station() { Id = 3, PlaceName = "Боровицкая", GeoLat = 37.609073, GeoLong = 55.750509, Line = "Серпуховско-Тимирязевская", Traffic = 1.0 }); return Json(stations, JsonRequestBehavior.AllowGet); } } }
Для простоты примера я не стал создавать контекст данных, базу данных, а просто определяю весь необходимый список объектов в действии контроллера. У нас здесь два действия: Index просто возвращает обычное представление, а метод GetData посылает в ответ сериализованный в объекты json список станций.
И теперь создадим представление Index.cshtml для соответствующего действия контроллера:
@{ ViewBag.Title = "Home Page"; } <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> <style> .stationInfo { height: 150px; width: 250px; } </style> <div id="canvas" style="height: 600px; width:600px;"></div> <!--Устанавливаем секцию scripts, которая затем будет рендериться на мастер-странице --> @section scripts { <script type="text/javascript"> $(document).ready(function () { GetMap(); }); // Функция загрузки function GetMap() { google.maps.visualRefresh = true; // установка основных координат var Moscow = new google.maps.LatLng(55.752622, 37.617567); // Установка общих параметров отображения карты, как масштаб, центральная точка и тип карты var mapOptions = { zoom: 15, center: Moscow, mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP }; // Встраиваем гугл-карты в элемент на странице и получаем объект карты var map = new google.maps.Map(document.getElementById("canvas"), mapOptions); // Настраиваем красный маркер, который будет использоваться для центральной точки var myLatlng = new google.maps.LatLng(55.752622, 37.617567); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Станции метро' }); // Берем для маркера иконку с сайта google marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png') // Получаем данные $.getJSON('@Url.Action("GetData","Home")', function (data) { // Проходим по всем данным и устанавливаем для них маркеры $.each(data, function (i, item) { var marker = new google.maps.Marker({ 'position': new google.maps.LatLng(item.GeoLong, item.GeoLat), 'map': map, 'title': item.PlaceName }); // Берем для этих маркеров синие иконки с сайта google marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png') // Для каждого объекта добавляем доп. информацию, выводимую в отдельном окне var infowindow = new google.maps.InfoWindow({ content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: " + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>" }); // обработчик нажатия на маркер объекта google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); }) }); } </script> }
Вначале мы подключаем необходимый для работы файл с кодом javascript.
Затем устанавливаем стили для класса stationInfo - этот класс будет использоваться для стилизации окна, которое будет выводить информацию о станции метро.
Элемент <div id="canvas" style="height: 600px; width:600px;"></div>
как раз и будет представлять область, куда будет выводиться
карта google.
Поскольку предполагается, что представление будет использовать мастер-страницу, где есть секция scripts, то мы определим эту секцию в представлении. В скрипте функция jQuery вызывает функцию GetMap(), которая и содержит весь функционал.
Вначале мы настраиваем основной объект, который будет отображаться на карте и связанные с ним параметры:
google.maps.visualRefresh = true; // установка основных координат var Moscow = new google.maps.LatLng(55.752622, 37.617567); // Установка общих параметров отображения карты, как масштаб, центральная точка и тип карты var mapOptions = { zoom: 15, center: Moscow, mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP }; // Встраиваем гугл-карты в элемент на странице и получаем объект карты var map = new google.maps.Map(document.getElementById("canvas"), mapOptions); // Настраиваем красный маркер, который будет использоваться для центральной точки var myLatlng = new google.maps.LatLng(55.752622, 37.617567); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Станции метро' }); // Берем для маркера иконку с сайта google marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')
Во второй части функции обращаемся к действию GetData и загружаем данные, определенные к методе контроллера:
// Получаем данные $.getJSON('@Url.Action("GetData","Home")', function (data) { // Проходим по всем данным и устанавливаем для них маркеры $.each(data, function (i, item) { var marker = new google.maps.Marker({ 'position': new google.maps.LatLng(item.GeoLong, item.GeoLat), 'map': map, 'title': item.PlaceName }); // Берем для этих маркеров синие иконки с сайта google marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png') // Для каждого объекта добавляем доп. информацию, выводимую в отдельном окне var infowindow = new google.maps.InfoWindow({ content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: " + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>" }); // обработчик нажатия на маркер объекта google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); }) });
После получения координат на карте new google.maps.LatLng(item.GeoLong, item.GeoLat)
устанавливаем синие маркеры для объектов на карте
и для каждого объекта создаем свое окно infowindow
, в котором будет выводиться связанная информация:
Запустив проект на выполнение, мы сможем использовать наши объекты и получать по ним переданные сведения.
Таким образом, мы можем задействовать в нашем приложении функциональность карт от Google.