谷歌地图距离基于缩放级别

Question

我使用谷歌地图根据用户的当前位置使用标记显示一些位置。用户的当前位置是地图的中心点。默认zoom level 是12。默认情况下，我仅在 300 英里（在我的情况下约为）距离内显示标记。

那我该怎么做以下，

1) 如果decrease 缩放级别，我需要增加应该在增加的距离内显示标记的距离。我应该增加多少英里（即Zoom level 是11）？

2) 如果increase 缩放级别，我需要减少应该显示标记的距离而不增加距离。我应该减少多少英里（即Zoom level 是13）？

请建议我有任何内置选项可以做到这一点......

Answer 1

我在快速谷歌后发现了 zoom_changed 事件

例如：

 map.addListener('zoom_changed', function() {
    infowindow.setContent('Zoom: ' + map.getZoom());
  });

更多信息 Google Api 文档here

Answer 2

我不确定我是否正确理解了您的问题，但是当您将缩放比例增加 1 时，您必须将距离除以 2。当您将缩放比例减少 1 时，您必须将距离乘以 2。

公式是：

newDistance=(Math.pow(2,initialZoom-currentZoom)*initialDistanceAtInitialZoom)

演示：（画一个圆，上面的公式将用于计算半径）

function initialize() {
   var map    = new google.maps.Map(document.getElementById('map_canvas'), {
                  zoom: 4,
                  minZoom:2,
                  center: new google.maps.LatLng(52.52, 13.4),    
                  noClear:true,
                  zoomControl:true,
                  draggable:false,
                  scrollwheel:false,
                  disableDefaultUI:true
                }),
      circle  = new google.maps.Circle({
                  map:map,
                  center:map.getCenter(),
                  radius:300000*1.609344
                }),
      ctrl    = document.getElementById('radius');
    
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);
    
    google.maps.event.addListener(map,'zoom_changed',
    
    (function(z,r){
        return function(){
          var radius=(Math.pow(2,z-map.getZoom())*r);
          circle.setRadius(radius);
          ctrl.innerHTML=(radius/1609.344).toFixed(3)+' miles(zoom:'+map.getZoom()+')';
        }
      }(map.getZoom(),circle.getRadius())
    ));
    google.maps.event.trigger(map,'zoom_changed');
  
}

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

html,body,#map_canvas{
          height:100%;
          margin:0;
          padding:0;
       }
       #radius{
          background:#fff;
          padding:4px;
          font-size:14px;
          font-family:Monospace;
       }

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"><div id="radius"></div></div>