聚合物样式 google-map
Polymer style google-map
如何将样式应用于 Polymer 1 google-map 标签?
文档建议可以通过标签上的 'styles' 属性 传递 object of styles。
但是,当使用以前没有问题的 this 之类的东西时,样式没有被加载。
我试过用对象(而不是数组)替换 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>
您是否对 styles
属性 使用单引号? IE。 styles=''
而不是 styles=""
这对我有用。
我找不到关于如何在 style
标记的值内传递此对象的任何答案,但我能够通过阅读文件中的注释来应用样式" google -map.html":
<script>
var map = document.querySelector('google-map');
map.styles = [
{
stylers: [
{saturation: -100}
]
},
{
featureType: 'water',
stylers: [
{color: '#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');
如何将样式应用于 Polymer 1 google-map 标签?
文档建议可以通过标签上的 'styles' 属性 传递 object of styles。
但是,当使用以前没有问题的 this 之类的东西时,样式没有被加载。
我试过用对象(而不是数组)替换 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>
您是否对 styles
属性 使用单引号? IE。 styles=''
而不是 styles=""
这对我有用。
我找不到关于如何在 style
标记的值内传递此对象的任何答案,但我能够通过阅读文件中的注释来应用样式" google -map.html":
<script>
var map = document.querySelector('google-map');
map.styles = [
{
stylers: [
{saturation: -100}
]
},
{
featureType: 'water',
stylers: [
{color: '#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');