Question

我有一个谷歌地图的脚本，我正在使用，我想更改缩放控制器图标（+， - ）或color.is有什么方法可以做到这一点？

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
    
    
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

deafult zoom控件的样式选项不提供任何改变颜色的功能。但是您可以隐藏默认控件，添加自定义控件并为它们提供相同的功能。

这里是一个示例javascript代码，用于添加自定义放大按钮

function CustomZoomInControl(controlDiv, map) {

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#5ff';
    controlUI.style.border = '2px solid #5ff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '16px';
    controlText.style.fontWeight = 'bold';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = '+';
    controlUI.appendChild(controlText);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        map.setZoom(map.getZoom() + 1);
    });

}

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        zoomControl: false,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    // Create the DIV to hold the control and
    // call the CustomZoomInControl() constructor passing
    // in this DIV.
    var customZoomInControlDiv = document.createElement('div');
    var customZoomInControl = new CustomZoomInControl(customZoomInControlDiv, map);

    customZoomInControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(customZoomInControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

如果您想同时使用两个控制按钮，请将 CustomZoomInControl 函数更改为此：

function CustomZoomInControl(controlDiv, map) {

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#000';
    controlUI.style.border = '2px solid #000';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '10px';
    controlUI.style.textAlign = 'center';
    controlUI.style.width = '40px';
    controlUI.style.height = '40px';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontSize = '24px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.style.color = '#fff';
    controlText.innerHTML = '+';
    controlUI.appendChild(controlText);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        map.setZoom(map.getZoom() + 1);
    });

    // Set CSS for the control border
    var controlUILeft = document.createElement('div');
    controlUILeft.style.backgroundColor = '#000';
    controlUILeft.style.border = '2px solid #000';
    controlUILeft.style.cursor = 'pointer';
    controlUILeft.style.marginBottom = '20px';
    controlUILeft.style.textAlign = 'center';
    controlUILeft.style.width = '40px';
    controlUILeft.style.height = '40px';
    controlDiv.appendChild(controlUILeft);

    // Set CSS for the control interior
    var controlTextLeft = document.createElement('div');
    controlTextLeft.style.fontSize = '24px';
    controlTextLeft.style.paddingLeft = '5px';
    controlTextLeft.style.paddingRight = '5px';
    controlTextLeft.style.color = '#fff';
    controlTextLeft.innerHTML = '-';
    controlUILeft.appendChild(controlTextLeft);

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

}

和用于创建控件的相同代码：

var customZoomInControlDiv = document.createElement('div');
    var customZoomInControl = new CustomZoomInControl(customZoomInControlDiv, map);

    customZoomInControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(customZoomInControlDiv );

Answer 3

那些 + 和 - 是 SVG 文件。我可以通过在 css 中定位 img 来更改位置、不透明度等。

我的地图 div id 是 id="gmap"。我的 css 是针对 #gmap img {...}

强制使用新的 img url 也可能有效。

更改放大/缩小谷歌地图中的图像（+， - ）或颜色

3 个答案: