Question

我根据用户的当前位置使用谷歌地图使用标记显示某些位置。用户的当前位置是地图的中心点。默认<ul id="d"> <li></li> <li></li> <li></li> <li></li> </ul> <p>Go "Full Page" and then try shrinking the window size to below ~908 pixels</p>为zoom level。默认情况下，我只在300英里（大约在我的情况下）距离内显示标记。

在那我该怎么做呢，

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

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

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

Answer 1

我不确定我是否正确理解你的问题，但是当你将变焦增加1时，你必须将距离除以2.当你将变焦减小1时，你必须将距离乘以2.

公式为：

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>

'There was an error sending your message: Whoops! You already said that..'

Answer 2

我在快速谷歌

之后找到了zoom_changed事件

例如：

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

更多信息Google Api文档here

Google根据缩放级别绘制距离

2 个答案: