Google maps 聚合物风格谷歌地图

如何将样式应用于Polymer 1 google地图标记

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

但是，当使用类似于以前可以正常工作的东西时，不会加载样式

---

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

应该可以。您确定正在正确传递样式对象吗

这将为您提供一个样式化的地图：

<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>

---

您是否对

样式

属性使用单引号？即

style=''

而不是

style=“

---

这就是我的工作原理。

我找不到任何关于如何在

style

标记的值内传递此对象的答案，但我能够通过阅读文件“google map.html”中的注释来应用这些样式：

var-map=document.querySelector（'google-map'）；
map.styles=[
{
样式：[
{饱和度：-100}
]
},
{
功能类型：“水”，
样式：[
{颜色：'#1d5068'}
]
}
];

---

在我之前对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');

---

我正在尝试你的方法，因为我需要从脚本中分配样式，但到目前为止它对我不起作用。有什么提示吗？@Fausto R.，你能用你的代码创建一个JSFIDLE并在这里分享吗？抱歉@Dianclos耽搁了，我错过了你的问题。我现在找不到我以前做错了什么，但我最终在ma ready事件函数中使用了不同的方法，我将在下面将代码作为答案发布，以防万一。

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');