如何更改默认的谷歌地图 [英] How to change the default google maps
本文介绍了如何更改默认的谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近我发现了，但我不知道如何应用它。在哪里 MapOptions 比如？
任何想法都值得欢迎！
解决方案
这里有一个完整的示例供您参考：
我在这里添加了所有内容。
<！DOCTYPE html>
< html>
< head>
< title> Google地图< / title>
< style> ＃map-canvas {margin：0;填充：0; height：400px;宽度：100％; }
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script>
函数initialize（）{
var styles = [
{
featureType：landscape，
stylers：[
{color：#ffffff}
]
}，{
featureType：road，
stylers：[
{颜色：＃000000}
]
}，{
featureType：water，
elementType：geometry，
：[
{color：#ffffff}
]
}，{
featureType：poi，
stylers：[
{color：#ffffff}
]
}
];
google.maps.visualRefresh = true;
var styledMap = new google.maps.StyledMapType（styles，{name：Styled Map}）;
var mapDiv = document.getElementById（'map-canvas'）;
var myOptions = {
zoom：4，
center：new google.maps.LatLng（-25.363882，131.044922），
mapTypeId：google.maps.MapTypeId .ROADMAP
};
map = new google.maps.Map（mapDiv，myOptions）;
map.mapTypes.set（'map_style'，styledMap）;
map.setMapTypeId（'map_style'）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>
< / body>
< / html>
Recently I've found out a way to change google maps appearance as the following image suggests
In the help menu, it is adviced that JSON can be used to modify the default map or create a new style. Even though I can get the code and understand its meaning, I don't know how and where to use it to create a black and white map style. How can I do that?
The code is
[
{
"featureType": "landscape",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"stylers": [
{ "color": "#ffffff" }
]
}
]
Google suggests a way but I don't know how to apply it. Where is MapOptions for instance?
Any ideas are more than welcome!
解决方案
Here's a FULL example for you to follow:
I added it all here.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style> #map-canvas { margin: 0; padding: 0; height: 400px; width: 100%; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
function initialize() {
var styles = [
{
"featureType": "landscape",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"stylers": [
{ "color": "#ffffff" }
]
}
];
google.maps.visualRefresh = true;
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
var mapDiv = document.getElementById('map-canvas');
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</body>
</html>
这篇关于如何更改默认的谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
