Google根据缩放级别映射距离 [英] Google maps distance based on the zoom level

问题描述

我已经使用Google地图根据用户的当前位置使用标记来显示某些位置。用户的当前位置是地图的中心点。默认的缩放级别为 12 。默认情况下，我仅在300英里（以我的情况为例）距离内显示标记。

I have used google maps for displaying some locations using markers, based on the user's current location. User's current location is the center point of the map. The default zoom level is 12. In default, I displayed markers within 300 miles(approximately in my case) distance only.

在这种情况下，我该怎么做？

In that how can I do the following,

1）如果减小缩放级别，我需要增加距离，该距离还应在增加的距离内显示标记。我应该增加多少距离（例如，缩放水平是 11 ）？

1) If decrease the zoom level, I need to increase the distance that should display markers within the increased distance also. how much distance should I increase in miles (i.e. Zoom level is 11) ?

2）如果增大缩放级别，我需要减小应该显示标记的距离，而无需增加距离。我应该减少多少距离（例如，缩放水平是 13 ）？

2) If increase the zoom level, I need to decrease the distance that should display markers without the increased distance. how much distance should I decrease in miles (i.e. Zoom level is 13) ?

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

Please suggest me there is any built-in option to do that ...

推荐答案

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

I'm not sure if I understand your question correctly, but when you increase the zoom by 1 you must divide the distance by 2. When you decrease the zoom by 1 you must multiply the distance by 2.

公式应为：

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

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

Demo: (drawing a circle where the formula above will be used to calculate the radius)

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>

这篇关于Google根据缩放级别映射距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！