javascript - 以 3 为增量放大和缩小 Google map

标签 javascript google-maps

我之前问过this这个问题有一个很好的解决方案(见下文),但现在我想知道是否可以修改 Google Maps API 的放大和缩小级别,以便 map 根据 zoom_changed 的增量以 3 为增量进行更改> 事件被触发?

上一个线程的这个解决方案对于增量 2 效果很好:

google.maps.event.addListener(map,'zoom_changed',function(){
    var z = this.getZoom();
    if (z % 2) { //when zoom is a odd number
        var fx = ((!isNaN(this.get('z')) && this.get('z') < z)) ? 2:0;
        this.setZoom(Math.floor(z / 2) * 2 + fx);
    } else {
        this.set('z', z);
    }
});

JSFiddle 的一个示例是 here

编辑:所以如果 2 被 3 替换,上面的代码就可以工作。但是我遇到的一件事是将初始缩放设置为 11。它不起作用。如果缩放率为 3,则默认为 9;如果缩放率为 2,则默认为 10。

最佳答案

您可以轻松更改缩放率
如果您将速率分配给 var Zoom_rate,您可以轻松更改配置,请参阅此 fiddle https://jsfiddle.net/33qskxdg/

    function initialize() {


      var zoom_rate = 3    // assign the zoom rate

      var ctrl = document.getElementById('zoom');
      map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 14,
          center: new google.maps.LatLng(52.549,
            13.425),
          noClear: true
        }),


        map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);

      google.maps.event.addListener(map, 'zoom_changed', function() {
        var z = this.getZoom();
        if (z % zoom_rate) { //when zoom is a odd number
          var fx = ((!isNaN(this.get('z')) && this.get('z') < z)) ? zoom_rate : 0;
          this.setZoom(Math.floor(z / zoom_rate) * zoom_rate + fx);
        } else {
          this.set('z', z);
        }
        ctrl.innerHTML = this.getZoom();
      });
      google.maps.event.trigger(map, 'zoom_changed');
    }


    google.maps.event.addDomListener(window, 'load', initialize);

关于javascript - 以 3 为增量放大和缩小 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38002418/

相关文章:

iphone - 大量位置地理编码的策略

google-maps - 修复中心的谷歌地图标记

android - ActionBar 进度微调器,同时将 1000 的标记添加到 android Googlemap

javascript - Google map 未显示 domainname.com

javascript - 将 javascript 参数从对象构造函数传递到对象的方法?

javascript - 按钮单击事件触发错误的事件处理程序

javascript - 如何使用 Map 对象查找数组的元素数

javascript - Google Maps Circle Overlay 和 Vincenty Formula

javascript - 如何使用复选框使用 Javascript 更改 <tr> bgcolor?

javascript - 图表不适合 <div>(highcharts,MVC)错误?