google-maps - 谷歌地图样式缩放控制

Question

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

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

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

Answer 1

有一个使用谷歌地图 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 2

要在不使用 API 的情况下设置按钮的样式，从而允许您做更多的事情，请button通过 API 创建控件 - 如上面@Picard 回答中所述 - 并附加到divacssClass属性，然后根据需要设置按钮的样式：

     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 **/ }

Answer 3

您可能需要为此使用 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');
});

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