Question

我在地图的中心放置了一个标记（用＃333填充）作为半径。最初，标记的大小设置为151px。在这种情况下，如果用户单击缩小按钮，则标记的大小保持不变，但在地图上捕获的半径更大。如果用户单击放大按钮，则标记的大小仍保持不变，但捕获的半径将变小。我这样做的原因是我想知道这个人的当前位置（GPS）是否在他使用他的移动应用程序指定的特定半径内。我的问题是如何在用户缩小或放大后获取标记的当前半径？关于这个问题的任何想法？谢谢。

我的Google Map API脚本：

function initGoogleMap() {  
  console.info('initGoogleMap');
  var latitude =  10.314241194743438;
  var longitude = 123.90536092883599;
  var zoom = 17;
  var latlng = new google.maps.LatLng(latitude, longitude);
  var map_options = {
    center: latlng,
    zoom: zoom,
    draggable: true,
    zoomControl: true,
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.5,
      fillColor: "#333",
      strokeOpacity: 1.0,
      strokeColor: '#CB0909',
      strokeWeight: 0, 
      scale: 151 // in pixels
    }
  });

  console.info('init zoom level: ', zoom);
  marker.bindTo('position', map, 'center');
}

initGoogleMap();

请参阅附带的问题演示： https://jsfiddle.net/sudogem/kkpt9t07/3/

Answer 1

如果您知道圆的半径（以像素为单位），则可以使用.fromLatLngToDivPixel和.fromDivPixelToLatLng计算圆周上某点的纬度和经度，然后使用它来计算圆的半径米：

function computeRadius() {
    if (!overlay) return;
    var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
    var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y);
    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint);
    if (!edgeMarker || !edgeMarker.setPosition) {
        edgeMarker = new google.maps.Marker({
            position: pixelLatLng,
            map: map,
        });
    } else {
        edgeMarker.setPosition(pixelLatLng);
    }
    var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition());
    document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters";
}

updated fiddle

代码段

＆＃13;

function computeRadius() {
  if (!overlay) return;
  var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
  var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y);
  var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint);
  if (!edgeMarker || !edgeMarker.setPosition) {
    edgeMarker = new google.maps.Marker({
      position: pixelLatLng,
      map: map,
    });
  } else {
    edgeMarker.setPosition(pixelLatLng);
  }
  var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition());
  document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters";
}


var marker;
var overlay;
var edgeMarker;
var map;

function initGoogleMap() {
  console.info('initGoogleMap');
  var latitude = 10.314241194743438;
  var longitude = 123.90536092883599;
  var zoom = 17;
  var latlng = new google.maps.LatLng(latitude, longitude);
  var map_options = {
    center: latlng,
    zoom: zoom,
    draggable: true,
    zoomControl: true,
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.5,
      fillColor: "#333",
      strokeOpacity: 1.0,
      strokeColor: '#CB0909',
      strokeWeight: 0,
      scale: 151 // in pixels
    }
  });
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);

  google.maps.event.addListenerOnce(map, 'idle', computeRadius);
  google.maps.event.addListener(map, 'center_changed', computeRadius);
  google.maps.event.addListener(map, 'zoom_changed', computeRadius);

  console.info('init zoom level: ', zoom);
  marker.bindTo('position', map, 'center');
}

google.maps.event.addDomListener(window, 'load', initGoogleMap);

＆＃13;

/* Google Map */

#map_canvas {
  border: 1px solid #ccc;
  margin-top: 5px;
  width: 100%;
  height: 400px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<div id="map_canvas"></div>
<div id="info"></div>

＆＃13;

如何在放大或缩小后获得当前半径

1 个答案: