如何在谷歌地图api中显示大缩放滚动

Question

我必须显示以前版本的 google map api (v3.21) 中可用的大缩放滑块选项。我已经在脚本的 src 中指定了版本，但它不起作用。以下是我的代码：

html, body {
  height: 100%;
  margin: 0;
}

<div id="googleMap" style="height: 100%;width: 1349px;"></div>
<script type="text/javascript">
  var map;
  function initialize() {
    map = new google.maps.Map(document.getElementById('googleMap'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 2,
      streetViewControl: false,
      panControl: true,
      panControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
      },
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_TOP
      },
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.21&signed_in=true"></script>

Answer 1

“旧”平移和缩放控件已被删除。如果您仍然需要该功能，则需要创建自己的自定义控件来实现它。

相关问题（包括自定义平移/缩放控件的示例）：

• Google maps custom control always appears below the default controls（包含自定义平移控件）

• googlemaps api3, demogallery example “Custom Small Navigation Control”（包含自定义平移/缩放控件）

Answer 2

缩放控件现在只是一个“+”和“-”按钮 - 不再有 一个滑块。缩放控件的默认位置已从 TOP_LEFT 到 RIGHT_BOTTOM

了解更多检查

缩放控制

在此链接中屏蔽What's New in the v3.22 Map Controls

Answer 3

我为 IE11 开发了一个缩放滑块。它也适用于 Chrome 和 Mozilla，更新 css 属性。

https://github.com/bubango/zoom_slider_IE11

Answer 4

不确定您是否还在寻找缩放滑块，但我最近做了一个，也许您或其他任何人都可以使用它。

创建缩放构造函数...

function ZoomControl(controlDiv, map, min, max, currentZoom) {

  var controlUI = document.createElement('input');
  controlUI.type = 'range';
  controlUI.value = currentZoom;
  controlUI.min = min;
  controlUI.max = max;
  controlUI.style.position = "fixed";
  controlUI.style.top = "95%";
  controlUI.style.left = "50%";
  controlUI.style.transform = "translate(-50%, -50%)";
  controlUI.style.width = "400px";
  controlDiv.appendChild(controlUI);
  controlUI.addEventListener('click', function() {
    map.setZoom(parseFloat(controlUI.value));
  });

  google.maps.event.addListener(map, 'zoom_changed', function(){
      controlUI.value = map.getZoom();
  });

}

并在您创建地图时使用它。

function initMap() {

    //initial map options
    var options = {
        center: startLatLng,
        zoom: 3,
        minZoom: 3,
        maxZoom: 15,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        disableDefaultUI: true
        }

    map = new google.maps.Map(id('map'), options);

    var centerControlDiv = document.createElement('div');
    var centerControl = new ZoomControl(centerControlDiv, map, options.minZoom, options.maxZoom, options.zoom);

    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);

}

您的结果将有一个看起来像所附图像的滑块。