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

Question

如何用自己的图像替换Google Map V3缩放按钮？ 我已经尝试了另一篇文章中的以下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 个解决方案

解决方案1
0 2014-08-02 10:54:10

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

问题描述

1 个解决方案

解决方案1 0 2014-08-02 10:54:10

解决方案1
0 2014-08-02 10:54:10