调整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

您应该使用球形几何库，该库可以作为 Javascript Maps API 的一部分加载，方法是在加载 API 时附加 &libraries=geometry - 例如：

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

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

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

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

或在 Coffeescript 中：

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);