Question

如何用我自己的图像替换谷歌地图V3缩放按钮？我从another post尝试了下面的css，但它没有显示出来。我需要做些什么才能让它出现在地图上？我不介意在帖子上的第一个解决方案，但我需要它作为一个图像并坐在地图内而不是分开。

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom- controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px   !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

Answer 1

我有这个

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
#map-canvas .gm-style > .gmnoprint > .gmnoprint { background: url(https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-171_add_new_plus-128.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-canvas .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-canvas .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-canvas .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }
    </style>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&.js">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

我添加了一个更改缩放的大加号按钮

带有CSS和图像的Google Map V3缩放按钮

1 个答案: