谷歌地图风格的缩放控件

Question

谷歌地图风格的缩放控件

5

我正在使用Google Maps V3 Javascript API，并希望为缩放控件设置样式。虽然Google文档提供了有关移动自定义控件的信息，但似乎没有提供任何关于自定义控件样式的信息。 https://developers.google.com/maps/documentation/javascript/controls#ControlModification 我想要做的是能够为现有的缩放控件设置样式。

是否有一种方法可以为现有控件设置样式？我更愿意这样做，而不是创建一个新的自定义控件。

- sifxtreme

3个回答

2

为了不仅仅使用API来样式化按钮，以便您可以做更多的事情，通过API创建控件 - 如@Picard答案中所述 - 并将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 **/ }

- Simona Adriani

1

由于控件没有唯一的类或ID，您可能需要使用JQuery来完成此操作。我使用了与此处类似的技术：在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');
});

基本上，以上代码选择了缩放控件图像，然后向上一级获取整个容器。您可能需要指定不同于我所选的图像，这是针对“小”版本的。

- Kyle Crossman

这个答案存在一个问题，它永远不会过时，谷歌有改变图片的倾向，事实上他们最近将它们更改为内联SVG，所以这个答案已经不再适用。 - Tofandel

@Tofandel 老实说，我很惊讶这个“hack”居然持续了这么久。自从我8年前发布这个答案以来，看起来谷歌已经添加了更好的工具来处理这个问题。话虽如此，答案不再适用于几乎任何专有API都是真实的。 - Kyle Crossman

但是他们没有添加扩展现有控件的方法，因此除非您完全重写它，否则无法仅修改缩放控件的图像。 - Tofandel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Picard · Accepted Answer

有一个选项是使用谷歌地图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/