Question

我正在尝试在我的网站上实施谷歌地图，这就是它的样子

然而，它的颜色和影响我的用户界面。我访问了一个网站，上面有谷歌地图，看起来像这样。

如何将我的谷歌地图更改为灰色的一种风格？感谢任何帮助。如果需要，这里也是我的代码。

function markers(position, zoom) {
if (typeof zoom === "undefined") {
    zoom = 12;
}
var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: zoom,
    scrollwheel: false,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];
var flag;
var group = [];
 ....
}
 var markerCluster = new MarkerClusterer(map, markers);
}

Answer 1

您可以为自己制作自定义样式或使用snazzymaps中的预制样式。只需将您的愿望样式复制/设置为我在代码中添加的样式部分

function markers(position, zoom) {
    if (typeof zoom === "undefined") {
        zoom = 12;
    }
    var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: zoom,
        scrollwheel: false,
        center: center,
        styles: [
                {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "off"
                        },
                        {
                            "saturation": "-100"
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "saturation": 36
                        },
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 40
                        },
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "off"
                        },
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#4d6059"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#4d6059"
                        }
                    ]
                },
                {
                    "featureType": "landscape.natural",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#4d6059"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#4d6059"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#4d6059"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#7f8d89"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [
                        {
                            "color": "#2b3638"
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#2b3638"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#24282b"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#24282b"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                }
            ],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var flag;
    var group = [];
 ....
    }
    var markerCluster = new MarkerClusterer(map, markers);
}

如何为地图实施样式： Google Map API

P.S ：我是色盲，所以我只为你的地图选择了一种随机颜色样式而不是灰色样式（我假设）

Answer 2

将此粘贴到您发布的灰色地图的地图声明中（在... ROADMAP之后）

....mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
 {
"elementType": "geometry",
"stylers": [
   {
       "color": "#f5f5f5"
    }
   ]
   },
   {
"elementType": "labels.icon",
"stylers": [
  {
    "visibility": "off"
  }
  ]
 },
{
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
 },
 {
"elementType": "labels.text.stroke",
"stylers": [
  {
    "color": "#f5f5f5"
  }
   ]
  },
  {
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#bdbdbd"
  }
  ]
 },
 {
 "featureType": "poi",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
   ]
  },
   {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
   ]
  },
  {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
   ]
  },
  {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
  ]
   },
  {
"featureType": "road",
"elementType": "geometry",
"stylers": [
  {
    "color": "#ffffff"
  }
  ]
   },
 {
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
]
 },
  {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
  {
    "color": "#dadada"
  }
]
 },
 {
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
 },
 {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
 },
 {
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
]
 },
 {
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
]
 },
 {
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
     "color": "#c9c9c9"
     }
   ]
 },
 {
   "featureType": "water",
   "elementType": "labels.text.fill",
   "stylers": [
     {
        "color": "#9e9e9e"
      }
    ]
  }
 ]

如何在我的网站上更改谷歌mp的风格

2 个答案: