谷歌地图缩放滚动条不会出现在新版本中

Google maps zoom scrollbar does not appear on new version

本文关键字：新版本 缩放 滚动条 谷歌地图      更新时间：2023-09-26

我在这里有一个网页。它使用谷歌地图，效果很好。最近发布了新版谷歌地图，其中进行了一些更改。例如，应使用e.latLng.F代替e.latLng.lng，并使用e.latLng.lat代替e.latLng.A。到目前为止，一切都很好。但是，由于某些原因，无法看到缩放滚动条。我知道人们仍然可以通过鼠标滚动进行缩放，但是，对于没有定义鼠标滚动的设备，比如带触摸板的笔记本电脑，该怎么办？

这是初始化的一部分：

var mapOptions = {
    center: { lat: lat, lng: lon},
    zoom: 14
};
if (!administrator) {
    mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

我认为我应该为mapOptions定义一个属性，但我不知道应该在那里定义什么。当我在谷歌上搜索这个时，我还没有找到答案。我可能很快就会找到答案，但无论如何，我在这里提出这个问题是为了确保其他人将来会对这个问题有答案。谢谢

编辑：

在这个页面上，我可以看到缩放控件。这是那里的代码：

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,
    zoomControl:true,
    zoomControlOptions: {
      style:google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

如果我将其修改为：

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
  var mapProp = {
    center: { lat: 51.508742, lng: -0.120850},
    zoom:7,
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

缩放控制仍然被显示。我想知道为什么缩放控制显示在w3c而不是我的一端，因为：

  • 示例和我的代码都使用div
  • 属性以类似的方式初始化
  • 映射以类似的方式初始化
  • dom侦听器以类似的方式初始化

他们从最新的API中删除了滚动条，但保留了+和-缩放控件。奇怪的是，我看到你的地图上也没有这些。

这篇关于对映射控件所做的更改的文章可能对

有用

缩放控件一直显示，但页脚溢出了它。看起来缩放控件默认定位在右下角，而以前默认定位在左上角。解决方案是确保显示地图的div完全显示，或者初始化缩放控件的位置，如下所示：

var mapOptions = {
    center: { lat: lat, lng: lon},
    zoom: 14,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
};
相关文章：