![](/img/trans.png)
[英]How to set style of a data layer feature label in Google maps api?
[英]How to style Google Maps with their API
我正在尝试更改Google Map的样式,但不确定如何。 Google为我提供了以下对象属性:
[
{
"stylers": [
{ "hue": "#ff0022" },
{ "saturation": -16 },
{ "lightness": -5 }
]
}
]
但是我不确定如何使用以下代码(生成的Google地图)来实现该功能:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
<div id="gmap_canvas" style="height:500px;width:700px;"></div>
<a class="google-map-data" href="http://www.addmap.org" id="get-map-data">google maps</a>
<iframe src="http://www.embed-google-map.com/map-embed.php"></iframe>
<a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
<script type="text/javascript"> function init_map(){
var myOptions = {
zoom:15,
center:new google.maps.LatLng(51.8476894,-1.355176799999981),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"),
myOptions);
marker = new google.maps.Marker({
map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
infowindow = new google.maps.InfoWindow({
content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR Woodstock</span></div>"
});
google.maps.event.addListener(marker, "click", function(){
infowindow.open(map,marker);});infowindow.open(map,marker);}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
我试过将它们添加到myOptions中,但是不起作用:
var myOptions = {
zoom:15,
center:new google.maps.LatLng(51.8476894,-1.355176799999981),
mapTypeId: google.maps.MapTypeId.ROADMAP,
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
};
这是样式API的链接 。 但是我不能做它的正面或反面。 有人可以帮忙吗?
您只需将样式器添加到地图选项中(如注释中的链接所述):
var stylers = [{
"stylers": [{
"hue": "#ff0022"
}, {
"saturation": -16
}, {
"lightness": -5
}]
}];
var myOptions = {
...
styles: stylers
};
这是您上面使用样式器-> http://jsfiddle.net/cKQxb/产生的代码:
您应该将其放在构建地图的“选项对象”上。 或使用map.set(“ styles”,stylesOpts)设置此选项。
将代码更改为此:
var myOptions = {
zoom:15,
center:new google.maps.LatLng(51.8476894,-1.355176799999981),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ // The correct is STYLES not STYLERS
{ hue: "#00ffe6" },
{ saturation: -20 }
]
};
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
从文档中的第一个示例:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
<div id="gmap_canvas" style="height:500px;width:700px;"></div>
<a class="google-map-data" href="http://www.addmap.org" id="get-map-data">google maps</a>
<iframe src="http://www.embed-google-map.com/map-embed.php"></iframe>
<a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
<script type="text/javascript"> function init_map(){
var styles =[
{
"stylers": [
{ "hue": "#ff0022" },
{ "saturation": -16 },
{ "lightness": -5 }
]
}
]
var myOptions = {
zoom:15,
center:new google.maps.LatLng(51.8476894,-1.355176799999981),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"),
myOptions);
map.setOptions({styles: styles});
marker = new google.maps.Marker({
map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
infowindow = new google.maps.InfoWindow({
content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR Woodstock</span></div>"
});
google.maps.event.addListener(marker, "click", function(){
infowindow.open(map,marker);});infowindow.open(map,marker);}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
或在创建地图时:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
<div id="gmap_canvas" style="height:500px;width:700px;"></div>
<a class="google-map-data" href="http://www.addmap.org" id="get-map-data">google maps</a>
<iframe src="http://www.embed-google-map.com/map-embed.php"></iframe>
<a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
<script type="text/javascript"> function init_map(){
var styles =[
{
"stylers": [
{ "hue": "#ff0022" },
{ "saturation": -16 },
{ "lightness": -5 }
]
}
]
var myOptions = {
styles: styles,
zoom:15,
center:new google.maps.LatLng(51.8476894,-1.355176799999981),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"),
myOptions);
marker = new google.maps.Marker({
map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
infowindow = new google.maps.InfoWindow({
content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR Woodstock</span></div>"
});
google.maps.event.addListener(marker, "click", function(){
infowindow.open(map,marker);});infowindow.open(map,marker);}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
接受的答案说明了如何实现样式。 为了生成样式,有一个非常有用的样式工具,可让您直观地调整地图设置,然后吐出所需的JSON:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.