Кто-то знает, как преобразовать GMap Static JSON в HTML-URL?

Я скачал пример карты в стиле с http://snazzymaps.com/. Я пытаюсь преобразовать в URL-адрес, например http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=512x512&zoom=15¢er=Chicago но у меня это плохо получается. Я пытаюсь преобразовать следующий пример:

Пример Google Map в стиле статики

JSON выглядит так:

styles: [

{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"off"}]},

{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},

{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},

{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},

{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},

{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},

{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},

{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}

Я изменил следующее, но это не работает, я делаю что-то не так!!:S

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=512x512&zoom=15&center=Chicago&format=png&style=feature:poi%7Cvisibility:off%7Csaturation:-70%7Clightness:37%7Cgamma:1.15%7Celement:labels%7Cgamma:0.26%7Cvisibility:off&style=road%7Clightness:0%7Csaturation:0%7Chue:#ffffff%7Cgamma:0&style=road%7Celement:labels.text.stroke%7Cvisibility:off&style=road.arterial%7Celement:geometry%7Clightness:20&style=road.highway%7Celement:geometry%7Clightness:50%7Csaturation:0%7Chue:#ffffff&style=administrative.province%7Cvisibility:on%7Clightness:-50&style=administrative.province%7Celement:labels.text.stroke%7Cvisibility:off&style=administrative.province%7Celement:labels.text%7Clightness:20

Если кто-то может отправить мне совет, я был бы благодарен.

1 ответ

Решение

Вы должны прочитать раздел "Стилизованные карты" в Руководстве по API статических карт.

Настраиваемая "стилизованная" карта состоит из одного или нескольких указанных стилей, каждый из которых указывается с помощью параметра стиля в URL-адресе запроса статической карты. Дополнительные стили определяются путем передачи дополнительных параметров стиля.

Так что вам нужно передать несколько &style= на URL. (один для каждого элемента / элемента, который вы разрабатываете)
(Вы уже делаете это)

Для цветов вам нужно использовать 0xRRGGBB синтаксис.
Также в вашем примере первая строка в вашем JSON содержит три группы. Второй относится к глобальному стилю карты, а третий относится ко всем меткам на карте, а не к feature:poi, Таким образом, вам нужен другой стиль для того, что цели feature:all и один для element:labels

Пример snazzymap, на который вы ссылаетесь, будет выглядеть примерно так (не все стили включены)

  • &style=feature:poi|visibility:off
  • &style=feature:all|saturation:-70|lightness:37|gamma:1.15
  • &style=element:labels|visibility:off
  • &style=feature:road|lightness:0|saturation:0|hue:0xffffff|gamma:0
  • &style=feature:road.highway|element:geometry|lightness:50|saturation:0|hue:0xffffff

(имейте ввиду, что при настройке visibility в off нет смысла манипулировать каким-либо другим свойством этого элемента / элемента)

И при добавлении в URL, вы получите

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=815x815&zoom=15¢er=cicago&style=feature:poi|visibility:off&style=feature:all|saturation:-70|lightness:37|gamma:1.15 и стиль = элемент: этикетки | видимость: выкл и стиль = особенность: дорога | легковесность: 0 | насыщенность: 0 | оттенок: 0xffffff | гамма: 0 & стиль = особенность:road.highway| элемент: геометрия | легковесность: 50 | насыщенность: 0 | оттенок: 0xffffff


И вот небольшой инструмент для преобразования snazzymap JSON в URL статической карты Google..

Инструмент на http://jsfiddle.net/gaby/s6Dyp/

Другие вопросы по тегам