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

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


Продолжаю знакомить Вас с новыми возможностями в 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



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


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

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

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