谷歌地图样式缩放控制

Question

我正在使用Google Maps V3 Javascript API，并希望设置缩放控件的样式。虽然Google文档包含有关移动自定义控件的信息，但它似乎没有任何样式自定义控件。 https://developers.google.com/maps/documentation/javascript/controls#ControlModification

我想做的是能够设置现有缩放控件的样式。

有没有办法对EXISTING控件进行样式设置？我宁愿这样做而不是创建一个新的自定义控件。

Answer 1

您可能需要使用JQuery，因为控件没有任何唯一的类或ID。我使用了类似于这里的技术：Styling standard Zoom control in Google Maps v3

这是我的版本：

google.maps.event.addListener(map, 'tilesloaded', function() {
    $('#map_canvas').find('img[src="https://maps.gstatic.com/mapfiles/szc4.png"]').parent('.gmnoprint').css('YOUR_STYLE_HERE', 'YOUR_VALUE_HERE');
});

所以基本上，上面选择缩放控制图像，然后升级一级以获得整个容器。您可能需要指定与我不同的图像，这是针对“小”版本。

Answer 2

有一个选项，使用谷歌的地图API和自定义控制设置，这里是我找到的代码片段：

  var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */

function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and call the ZoomControl() constructor
  // passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();

你可以在这里看到一个有效的例子：http://jsfiddle.net/maunovaha/jptLfhc8/

Answer 3

要设置按钮的样式而不仅使用API​​，所以允许你做更多的事情，通过API创建button控件 - 如上面@Picard回答中所述 - 并附加到div一个cssClass属性，然后按你希望的样式按钮：

     var zoomOutButton = document.createElement('div');
         zoomOutButton.className = 'zoom-out-btn';

然后设置样式你只需添加你的规则：

     .zoom-out-btn{ /** your rules **/ }

与zoomInButton相同：

     var zoomInButton = document.createElement('div');
         zoomInButton.className = 'zoom-in-btn';

     .zoom-in-btn{ /** your rules **/ }