Вы здесь: Главная » Дизайн карты google

Дизайн карты google

Закрыть ... [X]

Продолжаю знакомить Вас с новыми возможностями в API Карт Google v3.

В этой версии появилась возможность изменения стандартного вида карт Google, путем  изменения визуального отображения таких элементов, как дороги, парки и населенные пункты с использованием различных стилей отображения, чем используемые в типе карта по умолчанию.


За это отвечает специальная функция StyledMapType

Конструктор функции StyledMapType ()  принимает массив пар значений MapTypeStyles, каждая из которых содержит селектор, указывающий на конкретный элемент карты featureType и стиль отображения для данного элемента stylers.

Полный список доступных элементов

Некоторые элементы имеют сложную структуру, например улицы — road, геометрия (geometry) google и обозначение (labels).

Для них задаются специальная опция ElementType, которая может принимать три значения:

— для всех all;
— геометрия geometry;
— обозначение labels.

Параметры для задания стиля отображения stylers:

hue — цвет, задается значение цвета в виде шестнадцатеричной строки ( "#ff0000" — красный цвет);

lightness — яркость, значения с плавающей точкой между -100 и 100, указывает на изменение в процентах яркости элемента, отрицательные значения – темнее (- 100 — черный), а положительные — светлее (100 — белый);

saturation — насыщенность, также от -100 до 100,  указывает на процентное изменение интенсивности основного цвета;

gamma — контрастность,  значения от 0,01 до 10,0, где 1,0 – значение по умолчанию.  Значения <1 увеличивают контрастность, в то время как значения > 1 уменьшить контрастность.

inverse_lightness — если true, то не менять существующую величину яркости элемента;

visibility — видимость (on, off, или simplified), показывает отображать или нет элемент на карте, если simplified — упрощение видимости, на карте автоматически упрощается вид элементов, например для дорог — не показываются некоторые дороги.

Пример -1

<!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 пример: Styled MapTypes</title> <link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var map; var nnovgorod = new google.maps.LatLng(56.316537, 43.998779); var MY_MAPTYPE_ID = 'mystyle'; function initialize() { var stylez = [ { featureType: "road.highway", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#ff0000" } ] },{ featureType: "water", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#0800ff" }, { lightness: -41 } ] } ]; var mapOptions = { zoom: 12, center: nnovgorod, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var styledMapOptions = { name: "Мой стиль" }; var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions); map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 800px; height: 600px;"></div> </body> </html>

<!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 пример: Styled MapTypes</title> <link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var map; var nnovgorod = new google.maps.LatLng(56.316537, 43.998779); var MY_MAPTYPE_ID = 'mystyle'; function initialize() { var stylez = [ { featureType: "road.highway", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#ff0000" } ] },{ featureType: "water", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#0800ff" }, { lightness: -41 } ] } ]; var mapOptions = { zoom: 12, center: nnovgorod, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var styledMapOptions = { name: "Мой стиль" }; var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions); map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 800px; height: 600px;"></div> </body> </html>

В начале, мы задаем название для нового типа карты

var MY_MAPTYPE_ID = ‘mystyle’;

После этого задаем стили отображения для двух элементов road.highway и water

var stylez = [
{
   featureType: "road.highway",
   elementType: "geometry",
   stylers: [
      { visibility: "on" },
      { hue: "#ff0000" }
   ]
},{
   featureType: "water",
   elementType: "geometry",
   stylers: [
      { visibility: "on" },
      { hue: "#0800ff" },
      { lightness: -41 }
   ]
  }
];

Для элемента road.highway (шоссейных дорог) будем задавать стиль для геометрии, стиль видимый, красного цвета.

Для элемента water (водных объектов) задается стиль для геометрии, цвет  #0800ff и величина яркости -41.

После этого определяем параметры для нашей карты

var mapOptions = {
zoom: 12,
center: nnovgorod,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

Определяем нашу карту

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

И название для нашего стиля

var styledMapOptions = {
name: "Мой стиль"
};

Определяем новый тип для карты и добавляем его

var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

Посмотреть пример в действии

Пример — 2: Задаем стиль отображения для карты

Посмотреть пример в действии

Существует специальный сервис для создания стилей отображения карты
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Хотя сервис не на русском пользоваться им понятно.

В разделе Feature type выбирается элемент для установки стиля

Раздел Element type служит для выбора применять стиль ко всему элементу, геометрии или обозначению.

В разделе Stylers настраиваются параметры отображения для стиля.

Если нужен еще дополнительный стиль для карты, необходимо нажать кнопку Add Style.

Удалить добавленный стиль – Reset Style.

Нажав на кнопку Show JSON, получаем готовый код для определения стилей отображения карты.


Источник: http://webmap-blog.ru/bez-rubriki/zadaem-svoj-stil-dlya-karty-s-ispolzovaniem-api-google-maps-v3


Поделись с друзьями



Рекомендуем посмотреть ещё:



Пользовательские стили на картах Google индивидуальное оформление Прически с низким пучком пошагово

Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google Дизайн карты google

ШОКИРУЮЩИЕ НОВОСТИ