Question

如何将样式应用于Polymer 1 google-map标记？

文档建议可以通过标记上的“styles”属性传入object of styles。

然而，当使用之前正常工作的this之类的东西时，没有加载样式。

我尝试用对象（而不是数组）替换snazzymaps中的代码，但这不起作用。

Answer 1

它应该工作。你确定你正确传递你的样式对象吗？

这为您提供了一个风格化的地图：

<google-map latitude="37.779" longitude="-122.3892" 
  min-zoom="9" max-zoom="11" language="en"
styles='[{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]'>
</google-map>

Answer 2

您是否使用styles属性的单引号？即styles=''而不是styles=""

这对我有用。

Answer 3

我找不到有关如何在style标记的值内传递此对象的任何答案，但我可以通过阅读文件“google-map.html”中的注释来应用这些样式：

<script>

var map = document.querySelector('google-map');

map.styles = [

    {

        stylers: [

            {saturation: -100}

        ]

    },

    {

        featureType: 'water',

        stylers: [

            {color: '#1d5068'}

        ]

    }

];

Answer 4

扩展我之前对Dian Carlos的评论/答案，这里是我最终使用的代码

假设styledMapDef包含地图样式定义对象

var styledMapType = new google.maps.StyledMapType(styledMapDef, {name: 'Styled'});
this.map.setOptions( {"mapTypeControl":"true","mapTypeControlOptions":{"position":"3", "mapTypeIds": ["roadmap", "satellite", "hybrid", "terrain", "styled"]}, "scaleControl": "true"} );
this.map.mapTypes.set('styled', styledMapType);
this.map.setMapTypeId('styled');

聚合物风格的谷歌地图

4 个答案: