Javascript 如何在google map api中显示大缩放滚动

我必须显示大缩放滑块选项，这是在谷歌地图api（v3.21）的早期版本中可用的。我已经在脚本的src中指定了版本，但它无法工作。下面是我的代码：

html，正文{
身高：100%；
保证金：0；
}

var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'googleMap'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：2，
街景控制：错误，
泛控制：对，
全控选项：{
位置：google.maps.ControlPosition.RIGHT\u顶部
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.RIGHT\u顶部
},
});
}

缩放控件现在只是一个“+”和“-”按钮-不再有了 滑块。缩放控件的默认位置已从更改为 从左到右从上到下

要了解更多信息，请检查

变焦控制

阻止此链接中的

缩放控件现在只是一个“+”和“-”按钮-不再有了 滑块。缩放控件的默认位置已从更改为 从左到右从上到下

要了解更多信息，请检查

变焦控制

---

块在这个链接中

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

---

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

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

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

• （包含自定义平移控件）

• （包含自定义平移/缩放控件）

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

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

• （包含自定义平移控件）

• （包含自定义平移/缩放控件）

---

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

创建缩放构造函数

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

}

---

您的结果将有一个类似于所附图像的滑块。

不确定您是否仍在寻找缩放滑块，但我最近制作了一个，也许您或其他人可以使用它

创建缩放构造函数

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

}

---

您的结果将有一个类似于所附图像的滑块。

我知道它没有润滑，但我已指定允许我使用该版本属性的版本。3.21版已失效，它不再可用。请执行一项操作删除signed_in=true，然后看看会发生什么。我知道它已被删除，但我已指定允许我使用该版本属性的版本。版本3.21已失效，它不再可用。请做一件事删除signed_in=true，然后看看会发生什么。我必须使用什么CSS来创建此样式的拇指滑块？上面的代码只生成一个黑色正方形@大执事没有花哨的css。我在ZoomControl函数中添加了一些样式，从而使用了性能较差的javascript。您可以使用这些样式创建一个类，并通过JS一次附加所有样式。你可以看到这个滑块的工作版本，这里没有谷歌地图：我最终使用了这里的代码-我必须使用什么CSS来创建这个样式的拇指滑块？上面的代码只生成一个黑色正方形@大执事没有花哨的css。我在ZoomControl函数中添加了一些样式，从而使用了性能较差的javascript。您可以使用这些样式创建一个类，并通过JS一次附加所有样式。你可以看到这个滑块的工作版本，这里没有谷歌地图：我最终使用了这里的代码-