我目前正在做一些项目，需要在 Google 地图上实现下一个设计。
我没有在 Google 地图样式参考中找到任何线索来回答这个问题 - https://developers.google.com/maps/documentation/javascript/style-reference
所以，我想知道 - 有没有可能（仅使用 API）？
还是需要一些技巧？例如，我考虑过让水域透明并将虚线图像放在地图后面。
提前致谢！
【问题讨论】：
标签： javascript css google-maps google-maps-api-3
在这个答案中，我将讨论关闭地图上水几何图形的可见性并设置地图后面的背景颜色。
首先，如上一个答案所述，您必须关闭地图的可见性。样式器可以参考google documentation，代码很简单：
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}]
}]
在这里，您在地图的 mapOptions 中声明您想要首先关闭水 + 土地的可见性，然后“打开”土地的可见性。
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(43.27749, -92.658775),
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}]
}]
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>其次，您必须删除地图的默认背景颜色（灰色）。 Stack Overflow 已经回答了这个问题。您可以通过以下代码简单地使用地图的参数mapOptions：
backgroundColor: 'none'
哪个给：
var mapOptions = {
backgroundColor: 'none',
zoom: 2,
center: new google.maps.LatLng(43.27749, -92.658775),
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}]
}]
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
一个简单的例子：
function initialize() {
var mapOptions = {
backgroundColor: 'none',
zoom: 2,
center: new google.maps.LatLng(43.27749, -92.658775),
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}]
}]
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>最后，下面的代码 sn-p 是一个非常简单的例子。地图背后有渐变色，地图默认背景色被移除，水的可见性被关闭。
function initialize() {
var mapOptions = {
backgroundColor: 'none',
zoom: 2,
center: new google.maps.LatLng(43.27749, -92.658775),
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}]
}]
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);.gradient {
height: 200px;
background: -webkit-repeating-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
background: -o-repeating-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(white, blue); /* Standard syntax (must be last) */
}<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" class="gradient" style="height:300px;"></div>请注意，此结果的灵感来自两个帖子。第一个是上面的答案，第二个是Stack Overflow这个地址里Roman的答案。
【讨论】：
注意：如果您有一个不同的答案可以扩展我的答案，请随时复制此答案的任何部分。
据我所知，no support 用于rgba 颜色。由于没有支持颜色格式的 alpha 操作，因此我认为获得所需结果并不容易。
下面有两个例子。
出于某种原因，我必须多次单击运行 sn-p（5-6 次）才能使其正常运行。 （为什么？）
1- 使用十六进制格式的常规 RGB 颜色值来操纵水的颜色 - 有效，但没有透明度
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12,
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
color: '#ff99cc'
}],
}]
})
}#map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%;
margin:0 auto;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>
<div id="map"></div>2- 关闭水几何图形的可见性 - 它不起作用，因为所有地图对象后面都有 default 纯色背景。 p>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12,
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
visibility: "off"
}],
}]
})
}#map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%;
margin:0 auto;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>
<div id="map"></div>您也许可以修改脚本以完全删除/更改默认背景，但这超出了我的想象。
这是我目前所知道的：
该颜色的变量（？）称为backgroundColor，它属于google.maps.MapOptionsgoogle对该变量的定义：
您可以在Google Maps JavaScript API V3 Reference 中阅读更多相关信息
没关系...
上面的变量只控制瓷砖加载前的背景颜色。我在tutorial 中为任何感兴趣的人找到了这一点。
仍然...在我看来，修复涉及两个步骤：
我希望这能让您更接近有效的修复。
终于 - 仅供参考 -
google 有一个非常方便的工具来帮助设计地图样式。它消除了“正常”地图样式等式中的所有猜测。
你可以在这里玩它：Google map style tool
【讨论】：