Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Google maps custom control always appears below the default controls（包含自定义平移控件）
googlemaps api3, demogallery example “Custom Small Navigation Control”（包含自定义平移/缩放控件）

Answer 2

缩放控件现在只是一个“+”和“ - ”按钮 - 不再存在一个滑块。 Zoom控件的默认位置已更改 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);

}

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

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

4 个答案: