Question

这是我的代码。目前地图是正常的。我想在一个黑色主题颜色的网站上应用这个，所以我想要这个灰色阴影的地图可以帮助吗？

    <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

     <style type="text/css">
     body { font: normal 10pt Helvetica, Arial; }
     #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
     </style>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.google.com/apis/gears
    /gears_init.js"></script>

     </head>
     <body>
     <div id="map" style="height: 500px; width: 500px;">

    <script type="text/javascript">

    var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center:
    new google.maps.LatLng(20, 0) }; 
    var map = new google.maps.Map(document.getElementById("map"), mapOpts); 
    var infoWindow = new google.maps.InfoWindow(); 
   var markerBounds = new google.maps.LatLngBounds(); 
    var markerArray = []; 

   function makeMarker(options) { 
  var pushPin = new google.maps.Marker({ map: map }); 
  pushPin.setOptions(options); 
  google.maps.event.addListener(pushPin, "click", 
  function () { infoWindow.setOptions(options); 
  infoWindow.open(map, pushPin); });
  markerBounds.extend(options.position); 
  markerArray.push(pushPin);
  return pushPin; } google.maps.event.addListener(map, "click", 
  function () { infoWindow.close(); }); 

      makeMarker({ title: "Test1", position: new google.maps.LatLng(10, 10),
     content: "Content1",      icon: '' });
      makeMarker({ title: "Test2", position: new google.maps.LatLng(20, 20),
    content: "Content2",    icon: '' });
      makeMarker({ title: "Test3", position: new google.maps.LatLng(30, 30), 
   content: "Content3", icon: '' });

 </script>
 </div>
 </html>

嗨，这是我的代码。目前地图是正常的。我想在一个黑色主题颜色的网站上应用这个，所以我想要这个灰色阴影的地图可以帮助吗？

您可以在以下位置查看：http://jsfiddle.net/1nqrwvgk/

Answer 1

您可以使用CSS过滤器：

#map
{
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

http://jsfiddle.net/1nqrwvgk/1/

这将使您的地图在所有主流浏览器中实现灰度。

如何将谷歌地图放在灰色

1 个答案: