更改 in/zoom 缩小图像 (+,-) 或 google 地图中的颜色

Question

我有一个 google 地图的脚本，我正在使用它，我想更改缩放控制器图标（+，-）或 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

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

这里是一个示例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 也可能有效。

Answer 4

基于#92-92 的回答。 .svg 文件具有透明背景，并且是 div 和 class = 'gm-controls-active' 的子项。 Google 为这些内联样式；所以你需要在 css 中使用 !important 来覆盖。

.css 覆盖

:root {
    --gm-button-background-color:white;
}
@media (prefers-color-scheme: dark) {
    :root {
        --gm-button-background-color:#2c4973;
    }
}

.gm-control-active {
    background-color:var(--gm-button-background-color) !important;
}

你不需要花哨的prefers-color-scheme。

这个解决方案有点麻烦，因为 Google 可以随时更改他们的 class 名称。同样不幸的是，全屏按钮和缩放按钮的 .svg 图像文件颜色不同。

更改 in/zoom 缩小图像 (+,-) 或 google 地图中的颜色

Change zoom in/zoom out image(+,-) or color in google map

google-maps