调整 google.maps.Circle 半径更准确

Question

我有两个points 代表(lat, lng) 和一个circle 代表center = point(lat, lng) 和radius。

[2] pry(main)> points
=> [#<struct Geography::Point x=8.6836, y=56.7619>, #<struct Geography::Point x=8.7501, y=56.8298>]
[3] pry(main)> circle
=> #<struct Geography::Circle center=#<struct Geography::Point x=8.71685, y=56.79585>, radius=5253.053885917054>

我有一种使用Haversine公式计算距离的方法，所以如果我从圆心到两个点进行计算，我会得到：

[4] pry(main)> Geography::Utils.distance_between(circle.center, points.first)
=> 5253.053885917054
[5] pry(main)> Geography::Utils.distance_between(circle.center, points.second)
=> 5252.8180384905045

请注意，第一个点到圆心的距离是圆的实际半径。所有的距离都以米为单位。我的意思是一个点在弧上，那个点应该非常接近。

预期结果：

如果我在谷歌地图中表示，圆弧将通过一个点并且超级接近第二个。

实际结果：

问题

谷歌地图投影在我的情况下如何工作，我如何才能获得满足现实的输出？

地图代码：

:coffeescript
  window.createPostcodeMarker = (postcode) ->
    marker = new google.maps.Marker
      draggable: false
      raiseOnDrag: false
      position: postcode.position
      map: map
      tooltip: postcode.name
      icon:
        path: google.maps.SymbolPath.CIRCLE
        fillOpacity: 1
        strokeOpacity: 1
        strokeColor: postcode.stroke_color
        strokeWeight: 1
        scale: 3
        fillColor: postcode.stroke_color

    circle = new google.maps.Circle
      map: map
      radius: postcode.radius
      fillColor: postcode.fill_color
      strokeColor: postcode.stroke_color
      strokeWeight: 1
      strokeOpacity: 0.8

    circle.bindTo('center', marker, 'position')

    marker

  window.createAreaMarker = (area) ->
    marker = new google.maps.Marker
      draggable: false
      raiseOnDrag: false
      position: area.position
      map: map
      tooltip: area.name
      icon:
        path: google.maps.SymbolPath.CIRCLE
        fillOpacity: 0.3
        strokeOpacity: 0.3
        strokeColor: area.stroke_color
        strokeWeight: 1
        scale: 0
        fillColor: area.stroke_color

    circle = new google.maps.Circle
      map: map
      radius: area.radius
      fillColor: area.fill_color
      strokeColor: area.stroke_color
      strokeWeight: 1
      strokeOpacity: 0.3

    circle.bindTo('center', marker, 'position')

    marker

  window.googleMapsInitializePostcodesMap = ->
    if PageData?.postcodesData?
      window.bounds = new google.maps.LatLngBounds()
      window.markers = []
      mapOptions =
        mapTypeId: google.maps.MapTypeId.ROADMAP
        maxZoom: 13

      window.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)

      # Create markers & extend bounds
      for postcode in PageData.postcodesData
        marker = createPostcodeMarker(postcode)
        markers.push(marker)
        bounds.extend(marker.position)

      for area in PageData.areasData
        marker = createAreaMarker(area)
        markers.push(marker)

      window.map.fitBounds(bounds)

= json_data_tag(@postcodes_map_data, 'postcodesData')
= json_data_tag(@areas_map_data, 'areasData')

#map-canvas{style: "width: 100%; height: 600px;"}

- content_for :footer_javascripts do
  = google_maps_api_js("googleMapsInitializePostcodesMap")

Codepen：https://codepen.io/radubogdan/pen/gWEvZP

Answer 1

您应该使用Spherical Geometry library，它可以通过在加载 API 时附加 &libraries=geometry 作为 Javascript Maps API 的一部分加载 - 例如：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

这种方法的优点是它抽象了 Maps API 中默认投影的实现细节。这让您的生活变得轻松，更重要的是，即使默认投影发生变化，也不会中断。

将 lat/lng 坐标传递给浏览器并计算它们之间的距离（以米为单位），如下所示：

var location1 = new google.maps.LatLng(lat1, lng1);
var location2 = new google.maps.LatLng(lat2, lng2);
var distance = google.maps.geometry.spherical.computeDistanceBetween(location1, location2);

或在 Coffeescript 中：

location1 = new google.maps.LatLng lat1, lng1;
location2 = new google.maps.LatLng lat2, lng2;
distance = google.maps.geometry.spherical.computeDistanceBetween location1, location2;

Answer 2

圆的半径需要是圆心与CoordinateA之间的距离米。

转换为米后，以下站点显示4288 应该是圆的半径https://www.daftlogic.com/projects-google-maps-distance-calculator.htm?route=56.79585,8.716850000000022|56.7619,8.68360000000007

基本上，您的 Haversine 公式还没有完全满足您的需求。