Javascript 自定义谷歌地图中的滚轮缩放

你能在谷歌地图中自定义滚轮缩放吗？如果用户使用鼠标滚轮，我希望地图缩放2或3级。可能吗

在这里查看我的JSFIDLE：

我在控制台中遇到以下错误：

uncaughtrangeerror:超过了最大调用堆栈大小

代码如下：

function initializeMap() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 14,
        center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        map.setZoom(map.getZoom() + 2);
    });
}

---

所以有两个问题,

1） 当前缩放级别+2可以超过20，这是谷歌地图支持的最大缩放级别。你应该确保它不超过20

---

2） 设置缩放实际上会触发缩放更改侦听器。因此，您应该放置一个标志或其他东西，以指示此缩放是由用户触发的还是由设置的缩放级别触发的，因此有两个问题

1） 当前缩放级别+2可以超过20，这是谷歌地图支持的最大缩放级别。你应该确保它不超过20

---

2） 设置缩放实际上会触发缩放更改侦听器。因此，您应该放置一个标志或其他东西，以指示此缩放是由用户触发的还是由设置的缩放级别触发的

您可能超出了缩放大小范围。 所以,

• 1.首先，请了解mapObject.getZoom（）可用的缩放范围 然后
• 2.仅当当前缩放大小低于范围2时，才使用if条件将setZoom（）增加2

例如，分区的可用缩放范围为0-20， 然后使用“如果条件”检查当前缩放大小，如果不大于18，则设置缩放大小=当前缩放大小+2
最多可达到20

if (map.getZoom() < 19) 
{
map.setZoom(map.getZoom() + 2); 
}

if（map.getZoom（）<19）
{
map.setZoom（map.getZoom（）+2）；
}

您可能超出了缩放大小范围。 所以,

• 1.首先，请了解mapObject.getZoom（）可用的缩放范围 然后
• 2.仅当当前缩放大小低于范围2时，才使用if条件将setZoom（）增加2

例如，分区的可用缩放范围为0-20， 然后使用“如果条件”检查当前缩放大小，如果不大于18，则设置缩放大小=当前缩放大小+2
最多可达到20

if (map.getZoom() < 19) 
{
map.setZoom(map.getZoom() + 2); 
}

if（map.getZoom（）<19）
{
map.setZoom（map.getZoom（）+2）；
}

您可以禁用内置滚轮缩放功能，并实现自己的处理程序：

函数初始化映射（）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
缩放：14，
滚轮：错误，
中心：新google.maps.LatLng（42.35210605281608，-83.12983274459839），
mapTypeId:google.maps.mapTypeId.ROADMAP
}),
fx=函数（e）{
e、 预防默认值（）；
var z=（e.wheelDelta>0 | | e.detail<0）？3:-3；
setZoom（Math.max（0，Math.min（22，map.getZoom（）+z））；
返回false；
};
google.maps.event.addDomListener（map.getDiv（），'mousewheel'，fx）；
google.maps.event.addDomListener（map.getDiv（），'DOMMouseScroll'，fx）；
}
google.maps.event.addDomListener（窗口'load'，initializeMap）
html，
身体
#地图画布{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
您可以禁用内置滚轮缩放功能，并实现自己的处理程序：


函数初始化映射（）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
缩放：14，
滚轮：错误，
中心：新google.maps.LatLng（42.35210605281608，-83.12983274459839），
mapTypeId:google.maps.mapTypeId.ROADMAP
}),
fx=函数（e）{
e、 预防默认值（）；
var z=（e.wheelDelta>0 | | e.detail<0）？3:-3；
setZoom（Math.max（0，Math.min（22，map.getZoom（）+z））；
返回false；
};
google.maps.event.addDomListener（map.getDiv（），'mousewheel'，fx）；
google.maps.event.addDomListener（map.getDiv（），'DOMMouseScroll'，fx）；
}
google.maps.event.addDomListener（窗口'load'，initializeMap）
html，
身体
#地图画布{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
堆栈溢出是由于您创建的递归函数的行为造成的。
当正常的鼠标滚轮动作被触发时，缩放被触发，您的代码正在运行，并改变缩放，由于这改变了缩放，您的代码一次又一次地运行。
其他人提供的答案可以完成这项工作。但要在鼠标点进行缩放，首先需要平移地图，将鼠标位置放在div区域的中心
 堆栈溢出是由于您创建的递归函数的行为造成的。
当正常的鼠标滚轮动作被触发时，缩放被触发，您的代码正在运行，并改变缩放，由于这改变了缩放，您的代码一次又一次地运行。
其他人提供的答案可以完成这项工作。但要在鼠标点进行缩放，首先需要平移地图，将鼠标位置放在div区域的中心
 我在这方面浪费了很多时间，提供的所有代码都是正确的，但也没有必要，因为默认情况下鼠标滚动为false，您需要使用ctrl+滚轮，告诉我函数已经存在，无需像提供的所有答案一样创建函数。它非常非常简单：

 function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        scrollwheel: true,
        mapTypeId: 'terrain'
    });

默认情况下，google insert提供的函数中的Ass滚轮缩放为false
滚轮：对，
和缩放级别2
不需要几个小时的编码
 我在这方面浪费了很多时间，提供的所有代码都是正确的，但也没有必要，因为默认情况下鼠标滚动为false，您需要使用ctrl+滚轮，告诉我函数已经存在，无需像提供的所有答案一样创建函数。它非常非常简单：

 function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        scrollwheel: true,
        mapTypeId: 'terrain'
    });

默认情况下，google insert提供的函数中的Ass滚轮缩放为false
滚轮：对，
和缩放级别2
不需要几个小时的编码
 我注意到的一件事是它会缩放到地图的中心。有没有办法放大到哪里